大二下学期团队项目（后台与前端代码结合）

今日主要与负责前端代码的队员完成了电影详情页面的星级显示：

var one = document.getElementById('one').getAttribute('d');
                var two = document.getElementById('two').getAttribute('d');
                var three = document.getElementById('three').getAttribute('d');
                var four = document.getElementById('four').getAttribute('d');
                var five = document.getElementById('five').getAttribute('d');
                var bean=document.getElementById('bean').getAttribute('d');
                one_s=[]
                two_s=[]
                three_s=[]
                four_s=[]
                five_s=[]
                appendUlBody ="";
                if(one!="")
                {
                    one_s=restr_s(one);
                    appendUlBody =appendUlBody+ "<p class='star'>腾讯视频评分：<font size='5' face='arial' color='black'>"+ one_s[1]+
                    "</font></p>" + "<canvas width='250' height='20' id='T_myCanvas'></canvas>"
                }
                if( two!="")
                {
                    two_s=restr_s(two);
                    appendUlBody = appendUlBody+ "<p class='star'>爱奇艺评分：<font size='5' face='arial' color='black'>"+ two_s[1]+
                    "</font></p>" + "<canvas width='250' height='20' id='A_myCanvas'></canvas>"
                }
                if(three!="")
                {
                    three_s=restr_s(three);
                    appendUlBody = appendUlBody+ "<p class='star'>IMDB评分：<font size='5' face='arial' color='black'>"+ three_s[1]+
                    "</font></p>" + "<canvas width='250' height='20' id='I_myCanvas'></canvas>"
                }
                if(four!="")
                {
                    four_s=restr_s(four);
                    appendUlBody = appendUlBody+ "<p class='star'>1905视频网评分：<font size='5' face='arial' color='black'>"+ four_s[1]+
                    "</font></p>" + "<canvas width='250' height='20' id='first_myCanvas'></canvas>"
                }
                if(five!="")
                {
                    three_s=restr_s(five);
                    appendUlBody = appendUlBody+ "<p class='star'>搜狐评分：<font size='5' face='arial' color='black'>"+ three_s[1]+
                    "</font></p>" + "<canvas width='250' height='20' id='S_myCanvas'></canvas>"
                }
                $(".score").append(appendUlBody);
                function restr_s(str){
                    if(str!=''){
                        str_s=str.split(", ")
                        for(i=0;i<str_s.length;i++){
                            if(i!=0&&i!=str_s.length-1){
                                str_s[i]=str_s[i].slice(1,str_s[i].length-1)
                            }else{
                                if(i==str_s.length-1){
                                    str_s[i]=str_s[i].slice(1,str_s[i].length-2)
                                }else{
                                    str_s[i]=str_s[i].slice(2,str_s[i].length-1)
                                }
                            }
                        }
                    }
                    return str_s;
                }
    <!--片源js -->
                    appendUlBody ="";
                    if(one!="")
                    {
                        one_s=restr_s(one);
                        appendUlBody =appendUlBody+ '<div class="p4">  <a target="_blank" href="'+one_s[2]+'" style="text-decoration:none;">腾讯视频</a></div>'+
                            '<div class="p3_1">'+one_s[3]+'</div><br><br>';
                    }
                    if( two!="")
                    {
                        two_s=restr_s(two);
                        appendUlBody =appendUlBody+ '<div class="p4">  <a target="_blank" href="'+two_s[2]+'" style="text-decoration:none;">爱奇艺</a></div>'+
                            '<div class="p3_1">'+two_s[3]+'</div><br><br>';
                    }
                    if( four!="")
                    {
                        four_s=restr_s(four);
                        appendUlBody =appendUlBody+ '<div class="p4"> <a target="_blank" href="'+four_s[2]+'" style="text-decoration:none;">1905视频网</a></div>'+
                            '<div class="p3_1">'+four_s[3]+'</div><br><br>';
                    }
                    if( five!="")
                    {
                        five_s=restr_s(five);
                        appendUlBody =appendUlBody+ '<div class="p4">  <a target="_blank" href="'+five_s[2]+'" style="text-decoration:none;">搜狐视频</a></div>'+
                            '<div class="p3_1">'+five_s[3]+'</div><br><br>';
                    }
                    $(".p2").append(appendUlBody);
    <!--画布星级js -->
    <!--为每一个电影模块定义一个画布对象，实现方法一致，只需改变画布对象名称-->
<!--豆瓣评分-->
/**
     * showRatingStars 显示评分星级
     * @param  {Object} myCanvas 画布对象
     * @param  {Number} rating   评分
     * @param  {Number} counts   star个数
     * @param  {Number} size     star大小
     * @param  {Object} style    star样式
     *           Example: style = {
         *                          borderColor:"#21DEEF",
         *                          fillColor:"#21DEEF",
         *                        spaceColor:"#FFFFFF"
         *                      }
     * @return none
     */
    function showRatingStars(D_myCanvas, rating, counts, size, style) {

        // 检测rating与star数目是否合适
        if (rating > 2*counts) {

            alert("Please set suitable rating and counts!");
            return;
        }

        // 检测大小设置是否合适
        if (D_myCanvas.offsetWidth < size * counts || D_myCanvas.offsetHeight < size) {

            alert("Please set suitable size and D_myCanvas' size!");
            return;
        }

        var context = D_myCanvas.getContext('2d');
        var xStart = rating * size;
        var yStart = 0;
        var xEnd = (Math.ceil(rating) + 1) * size;
        var yEnd = 0;
        var radius = size / 2;

        // 线性渐变，由左至右
        var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
        linear.addColorStop(0, style.fillColor);
        linear.addColorStop(0.01, style.spaceColor);
        linear.addColorStop(1, style.spaceColor);
        context.fillStyle = linear;

        // star边框颜色设置
        context.strokeStyle = style.borderColor;
        context.lineWidth = 1;

        // 绘制star的顶点坐标
        var x = radius,
            y = 0;

        for (var i = 0; i < counts; i++) {

            // star绘制
            context.beginPath();
            var x1 = size * Math.sin(Math.PI / 10);
            var h1 = size * Math.cos(Math.PI / 10);
            var x2 = radius;
            var h2 = radius * Math.tan(Math.PI / 5);
            context.lineTo(x + x1, y + h1);
            context.lineTo(x - radius, y + h2);
            context.lineTo(x + radius, y + h2);
            context.lineTo(x - x1, y + h1);
            context.lineTo(x - x1, y + h1);
            context.lineTo(x, y);
            context.closePath();
            context.stroke();
            context.fill();
            x = (i + 1.5) * size;
            y = 0;
            context.moveTo(x, y);
        }
    }
    var rating_bean = bean;
    var size = 20;
    var counts = 5;
    var style = {
        borderColor: "#FFFFFF",
        fillColor: "#FFD700",
        spaceColor: "#D5D5D5"
    };
    var D_myCanvas = document.getElementById("D_myCanvas");
    showRatingStars(D_myCanvas, rating_bean/2.0, counts, size, style);

<!--腾讯视频评分-->
    if(one!=""){
        var rating_one = one_s[1];
        var T_myCanvas = document.getElementById("T_myCanvas");
        showRatingStars(T_myCanvas, rating_one/2.0, counts, size, style);
    }

<!--爱奇艺评分-->
    if(two!=""){
        var rating_two = two_s[1];
        var A_myCanvas = document.getElementById("A_myCanvas");
        showRatingStars(A_myCanvas, rating_two/2.0, counts, size, style);
    }
 <!--IMDB评分-->
    if(three!='') {
        var rating_three = three_s[1];
        var I_myCanvas = document.getElementById("I_myCanvas");
        showRatingStars(I_myCanvas, rating_three / 2.0, counts, size, style);
    }
<!--1905评分-->
    if(four!=''){
        var rating_four= four_s[1];
        var first_myCanvas = document.getElementById("first_myCanvas");
        showRatingStars(first_myCanvas, rating_four/2.0, counts, size, style);
    }
<!--搜狐评分-->
    if(five!=''){
        var rating_five= five_s[1];
        var S_myCanvas = document.getElementById("S_myCanvas");
        showRatingStars(S_myCanvas, rating_three/2.0, counts, size, style);
    }