今日主要与负责前端代码的队员完成了电影详情页面的星级显示：
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); }