第一阶段冲刺（十）
2021.05.12 杨传伟
2021.05.12 李楠
任务：完成网页不同电影网址的布局和数据传值
moviepager.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="referrer" content="no-referrer">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <title>电影详情</title>
10 <link rel="stylesheet" href="../static/css/MoviePager.css">
11 <style>
12 <!--超链接样式-->
13 /* unvisited link */
14 a:link {
15 color: red;
16 }
17
18 /* visited link */
19 a:visited {
20 color: #3399cc;
21 }
22
23 /* mouse over link */
24 a:hover {
25 color: white;
26 background-color: #0eb0d2;
27 }
28
29 /* selected link */
30 a:active {
31 color: blue;
32 }
33 </style>
34 </head>
35 <script src="../static/js/jquery-1.7.2.min.js"></script>
36 <body>
37 <div id="container">
38 <div id="header">
39 <div class="title"><h1 id="title">树懒电影</h1></div>
40 <div class="container">
41 <form action="https://www.baidu.com/?tn=62095104_19_oem_dg" class="parent">
42 <input type="text" class="search" placeholder="电影名称，主演">
43 <input type="submit" name="" id="" value="搜索" class="btn">
44 </form>
45 </div>
46 </div>
47
48 <div id="main">
49 <div class="cat"></div>
50 <div class="content">
51 <div class="mvname"><h2>{{ title }}</h2></div>
52 <p class="picture"><img src="{{ img }}" height="200px" width="140px" /></p>
53 <p class="instroction">
54 导演: {{ director }} <br>
55 主演: {{ star }}<br>
56 类型：{{ type_movie }}<br>
57 制片国家/地区: {{ area }}<br>
58 语言: {{ language_movie }}<br>
59 上映日期: {{ date_time }}<br>
60 片长: {{ timelen }}<br>
61 </p>
62 <div id="bean" d="{{score}}" style="display:none"></div>
63 <div id="one" d="{{str_one}}" style="display:none"></div>
64 <div id="two" d="{{str_two}}" style="display:none"></div>
65 <div id="three" d="{{str_three}}" style="display:none"></div>
66 <div class="score">
67 <p class="star">豆瓣评分：<font size="5" face="arial" color="black">{{ score }}</font></p>
68 <canvas width="250" height="20" id="D_myCanvas"></canvas>
69 </div>
70 <script>
71 var one = document.getElementById('one').getAttribute('d');
72 var two = document.getElementById('two').getAttribute('d');
73 var three = document.getElementById('three').getAttribute('d');
74 var bean=document.getElementById('bean').getAttribute('d');
75 {#alert(one+two+three)#}
76 one_s=[]
77 two_s=[]
78 three_s=[]
79 appendUlBody ="";
80 if(one!="")
81 {
82 one_s=restr_s(one);
83 appendUlBody =appendUlBody+ "<p class='star'>腾讯视频评分：<font size='5' face='arial' color='black'>"+ one_s[1]+
84 "</font></p>" + "<canvas width='250' height='20' id='T_myCanvas'></canvas>"
85 }
86 if( two!="")
87 {
88 two_s=restr_s(two);
89 appendUlBody = appendUlBody+ "<p class='star'>爱奇艺评分：<font size='5' face='arial' color='black'>"+ two_s[1]+
90 "</font></p>" + "<canvas width='250' height='20' id='A_myCanvas'></canvas>"
91 }
92 if(three!="")
93 {
94 three_s=restr_s(three);
95 appendUlBody = appendUlBody+ "<p class='star'>IMDB评分：<font size='5' face='arial' color='black'>"+ three_s[1]+
96 "</font></p>" + "<canvas width='250' height='20' id='I_myCanvas'></canvas>"
97 }
98 $(".score").append(appendUlBody);
99 function restr_s(str){
100 if(str!=''){
101 str_s=str.split(", ")
102 for(i=0;i<str_s.length;i++){
103 if(i!=0&&i!=str_s.length-1){
104 str_s[i]=str_s[i].slice(1,str_s[i].length-1)
105 }else{
106 if(i==str_s.length-1){
107 str_s[i]=str_s[i].slice(1,str_s[i].length-2)
108 }else{
109 str_s[i]=str_s[i].slice(2,str_s[i].length-1)
110 }
111 }
112 }
113 }
114 return str_s;
115 }
116 </script>
117 <div class="collect">
118 <button class="button">想看</button>
119 <button class="button">在看</button>
120 <button class="button">看过</button>
121 </div>
122 <div class="story">
123 <div class="p1"><br>电影剧情简介 · · · · · ·</div>
124 <p class="p_story">{{summary}}
125 </p>
126 </div>
127 </div>
128 <div class="sidebar">
129 <div class="origin">
130 <div class="p1"><br>在哪儿看这部电影 · · · · · ·</div>
131 <div class="p2">
132 </div>
133 <script>
134 appendUlBody ="";
135 if(one!="")
136 {
137 one_s=restr_s(one);
138 appendUlBody =appendUlBody+ '<div class="p4"> <a href="'+one_s[2]+'" style="text-decoration:none;">腾讯视频</a></div>'+
139 '<div class="p3_1">'+one_s[3]+'</div><br><br>';
140 }
141 if( two!="")
142 {
143 two_s=restr_s(two);
144 appendUlBody =appendUlBody+ '<div class="p4"> <a href="'+two_s[2]+'" style="text-decoration:none;">爱奇艺</a></div>'+
145 '<div class="p3_1">'+two_s[3]+'</div><br>';
146 }
147 $(".p2").append(appendUlBody);
148 </script>
149 </div>
150 <p class="ad_right"></p>
151 </div>
152 </div>
153 <!--为每一个电影模块定义一个画布对象，实现方法一致，只需改变画布对象名称-->
154 <!--豆瓣评分-->
155 <script>
156 /**
157 * showRatingStars 显示评分星级
158 * @param {Object} myCanvas 画布对象
159 * @param {Number} rating 评分
160 * @param {Number} counts star个数
161 * @param {Number} size star大小
162 * @param {Object} style star样式
163 * Example: style = {
164 * borderColor:"#21DEEF",
165 * fillColor:"#21DEEF",
166 * spaceColor:"#FFFFFF"
167 * }
168 * @return none
169 */
170 function showRatingStars(D_myCanvas, rating, counts, size, style) {
171
172 // 检测rating与star数目是否合适
173 if (rating > 2*counts) {
174
175 alert("Please set suitable rating and counts!");
176 return;
177 }
178
179 // 检测大小设置是否合适
180 if (D_myCanvas.offsetWidth < size * counts || D_myCanvas.offsetHeight < size) {
181
182 alert("Please set suitable size and D_myCanvas' size!");
183 return;
184 }
185
186 var context = D_myCanvas.getContext('2d');
187 var xStart = rating * size;
188 var yStart = 0;
189 var xEnd = (Math.ceil(rating) + 1) * size;
190 var yEnd = 0;
191 var radius = size / 2;
192
193 // 线性渐变，由左至右
194 var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
195 linear.addColorStop(0, style.fillColor);
196 linear.addColorStop(0.01, style.spaceColor);
197 linear.addColorStop(1, style.spaceColor);
198 context.fillStyle = linear;
199
200 // star边框颜色设置
201 context.strokeStyle = style.borderColor;
202 context.lineWidth = 1;
203
204 // 绘制star的顶点坐标
205 var x = radius,
206 y = 0;
207
208 for (var i = 0; i < counts; i++) {
209
210 // star绘制
211 context.beginPath();
212 var x1 = size * Math.sin(Math.PI / 10);
213 var h1 = size * Math.cos(Math.PI / 10);
214 var x2 = radius;
215 var h2 = radius * Math.tan(Math.PI / 5);
216 context.lineTo(x + x1, y + h1);
217 context.lineTo(x - radius, y + h2);
218 context.lineTo(x + radius, y + h2);
219 context.lineTo(x - x1, y + h1);
220 context.lineTo(x - x1, y + h1);
221 context.lineTo(x, y);
222 context.closePath();
223 context.stroke();
224 context.fill();
225 x = (i + 1.5) * size;
226 y = 0;
227 context.moveTo(x, y);
228 }
229 }
230 var rating_bean = bean;
231 var size = 20;
232 var counts = 5;
233 var style = {
234 borderColor: "#FFFFFF",
235 fillColor: "#FFD700",
236 spaceColor: "#D5D5D5"
237 };
238 var D_myCanvas = document.getElementById("D_myCanvas");
239 showRatingStars(D_myCanvas, rating_bean/2.0, counts, size, style);
240
241 <!--腾讯视频评分-->
242 if(one!=""){
243 var rating_one = one_s[1];
244 var T_myCanvas = document.getElementById("T_myCanvas");
245 showRatingStars(T_myCanvas, rating_one/2.0, counts, size, style);
246 }
247
248 <!--爱奇艺评分-->
249 if(two!=""){
250 var rating_two = two_s[1];
251 var A_myCanvas = document.getElementById("A_myCanvas");
252 showRatingStars(A_myCanvas, rating_two/2.0, counts, size, style);
253 }
254 <!--IMDB评分-->
255 if(three!=''){
256 var rating_three= three_s[1];
257 var I_myCanvas = document.getElementById("I_myCanvas");
258 showRatingStars(I_myCanvas, rating_three/2.0, counts, size, style);
259 }
260
261 </script>
262 <!--
263 <footer class="footer">
264 <div class="container clearfix">
265 <div class="left">
266 <p>
267 违法和不良信息举报电话：4008353331-9
268 </p>
269 <p>
270 <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
271 </p>
272 </div>
273 </div>
274 </footer>
275 -->
276 </div>
277 </body>
278 </html>
2021.05.12 章英杰
今日任务：对电影详情界面进行优化，主要完成了“星级评分”模块，使界面可以根据电影评分的不同而产生不同的星数。
星级评分模块主要代码：
1 <div class="score">
2 <p class="star">豆瓣评分：<font size="5" face="arial" color="black">9.7</font></p>
3 <canvas width="250" height="20" id="D_myCanvas"></canvas>
4 <p class="star">腾讯视频评分：<font size="5" face="arial" color="black">8.5</font></p>
5 <canvas width="250" height="20" id="T_myCanvas"></canvas>
6 <p class="star">爱奇艺评分：<font size="5" face="arial" color="black">6.0</font></p>
7 <canvas width="250" height="20" id="A_myCanvas"></canvas>
8 <p class="star">IMDB评分：<font size="5" face="arial" color="black">7.5</font></p>
9 <canvas width="250" height="20" id="I_myCanvas"></canvas>
10 </div>
11 <!--为每一个电影模块定义一个画布对象，实现方法一致，只需改变画布对象名称-->
12 <!--豆瓣评分-->
13 <script>
14 /**
15 * showRatingStars 显示评分星级
16 * @param {Object} myCanvas 画布对象
17 * @param {Number} rating 评分
18 * @param {Number} counts star个数
19 * @param {Number} size star大小
20 * @param {Object} style star样式
21 * Example: style = {
22 * borderColor:"#21DEEF",
23 * fillColor:"#21DEEF",
24 * spaceColor:"#FFFFFF"
25 * }
26 * @return none
27 */
28 function showRatingStars(D_myCanvas, rating, counts, size, style) {
29
30 // 检测rating与star数目是否合适
31 if (rating > 2*counts) {
32
33 alert("Please set suitable rating and counts!");
34 return;
35 }
36
37 // 检测大小设置是否合适
38 if (D_myCanvas.offsetWidth < size * counts || D_myCanvas.offsetHeight < size) {
39
40 alert("Please set suitable size and D_myCanvas' size!");
41 return;
42 }
43
44 var context = D_myCanvas.getContext('2d');
45 var xStart = rating * size;
46 var yStart = 0;
47 var xEnd = (Math.ceil(rating) + 1) * size;
48 var yEnd = 0;
49 var radius = size / 2;
50
51 // 线性渐变，由左至右
52 var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
53 linear.addColorStop(0, style.fillColor);
54 linear.addColorStop(0.01, style.spaceColor);
55 linear.addColorStop(1, style.spaceColor);
56 context.fillStyle = linear;
57
58 // star边框颜色设置
59 context.strokeStyle = style.borderColor;
60 context.lineWidth = 1;
61
62 // 绘制star的顶点坐标
63 var x = radius,
64 y = 0;
65
66 for (var i = 0; i < counts; i++) {
67
68 // star绘制
69 context.beginPath();
70 var x1 = size * Math.sin(Math.PI / 10);
71 var h1 = size * Math.cos(Math.PI / 10);
72 var x2 = radius;
73 var h2 = radius * Math.tan(Math.PI / 5);
74 context.lineTo(x + x1, y + h1);
75 context.lineTo(x - radius, y + h2);
76 context.lineTo(x + radius, y + h2);
77 context.lineTo(x - x1, y + h1);
78 context.lineTo(x - x1, y + h1);
79 context.lineTo(x, y);
80 context.closePath();
81 context.stroke();
82 context.fill();
83 x = (i + 1.5) * size;
84 y = 0;
85 context.moveTo(x, y);
86 }
87 }
88
89 // 参数设置与函数调用
90 var size = 20;
91 var rating = 9.7;
92 var counts = 5;
93 var style = {
94 borderColor: "#FFFFFF",
95 fillColor: "#FFD700",
96 spaceColor: "#D5D5D5"
97 };
98 var D_myCanvas = document.getElementById("D_myCanvas");
99
100 showRatingStars(D_myCanvas, rating/2.0, counts, size, style);
101 </script>
102
103 <!--腾讯视频评分-->
104 <script>
105 /**
106 * showRatingStars 显示评分星级
107 * @param {Object} myCanvas 画布对象
108 * @param {Number} rating 评分
109 * @param {Number} counts star个数
110 * @param {Number} size star大小
111 * @param {Object} style star样式
112 * Example: style = {
113 * borderColor:"#21DEEF",
114 * fillColor:"#21DEEF",
115 * spaceColor:"#FFFFFF"
116 * }
117 * @return none
118 */
119 function showRatingStars(T_myCanvas, rating, counts, size, style) {
120
121 // 检测rating与star数目是否合适
122 if (rating > 2*counts) {
123
124 alert("Please set suitable rating and counts!");
125 return;
126 }
127
128 // 检测大小设置是否合适
129 if (T_myCanvas.offsetWidth < size * counts || T_myCanvas.offsetHeight < size) {
130
131 alert("Please set suitable size and T_myCanvas' size!");
132 return;
133 }
134
135 var context = T_myCanvas.getContext('2d');
136 var xStart = rating * size;
137 var yStart = 0;
138 var xEnd = (Math.ceil(rating) + 1) * size;
139 var yEnd = 0;
140 var radius = size / 2;
141
142 // 线性渐变，由左至右
143 var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
144 linear.addColorStop(0, style.fillColor);
145 linear.addColorStop(0.01, style.spaceColor);
146 linear.addColorStop(1, style.spaceColor);
147 context.fillStyle = linear;
148
149 // star边框颜色设置
150 context.strokeStyle = style.borderColor;
151 context.lineWidth = 1;
152
153 // 绘制star的顶点坐标
154 var x = radius,
155 y = 0;
156
157 for (var i = 0; i < counts; i++) {
158
159 // star绘制
160 context.beginPath();
161 var x1 = size * Math.sin(Math.PI / 10);
162 var h1 = size * Math.cos(Math.PI / 10);
163 var x2 = radius;
164 var h2 = radius * Math.tan(Math.PI / 5);
165 context.lineTo(x + x1, y + h1);
166 context.lineTo(x - radius, y + h2);
167 context.lineTo(x + radius, y + h2);
168 context.lineTo(x - x1, y + h1);
169 context.lineTo(x - x1, y + h1);
170 context.lineTo(x, y);
171 context.closePath();
172 context.stroke();
173 context.fill();
174 x = (i + 1.5) * size;
175 y = 0;
176 context.moveTo(x, y);
177 }
178 }
179
180 // 参数设置与函数调用
181 var size = 20;
182 var rating = 8.5;
183 var counts = 5;
184 var style = {
185 borderColor: "#FFFFFF",
186 fillColor: "#FFD700",
187 spaceColor: "#D5D5D5"
188 };
189 var T_myCanvas = document.getElementById("T_myCanvas");
190
191 showRatingStars(T_myCanvas, rating/2.0, counts, size, style);
192 </script>
193
194 <!--爱奇艺评分-->
195 <script>
196 /**
197 * showRatingStars 显示评分星级
198 * @param {Object} myCanvas 画布对象
199 * @param {Number} rating 评分
200 * @param {Number} counts star个数
201 * @param {Number} size star大小
202 * @param {Object} style star样式
203 * Example: style = {
204 * borderColor:"#21DEEF",
205 * fillColor:"#21DEEF",
206 * spaceColor:"#FFFFFF"
207 * }
208 * @return none
209 */
210 function showRatingStars(A_myCanvas, rating, counts, size, style) {
211
212 // 检测rating与star数目是否合适
213 if (rating > 2*counts) {
214
215 alert("Please set suitable rating and counts!");
216 return;
217 }
218
219 // 检测大小设置是否合适
220 if (A_myCanvas.offsetWidth < size * counts || A_myCanvas.offsetHeight < size) {
221
222 alert("Please set suitable size and A_myCanvas' size!");
223 return;
224 }
225
226 var context = A_myCanvas.getContext('2d');
227 var xStart = rating * size;
228 var yStart = 0;
229 var xEnd = (Math.ceil(rating) + 1) * size;
230 var yEnd = 0;
231 var radius = size / 2;
232
233 // 线性渐变，由左至右
234 var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
235 linear.addColorStop(0, style.fillColor);
236 linear.addColorStop(0.01, style.spaceColor);
237 linear.addColorStop(1, style.spaceColor);
238 context.fillStyle = linear;
239
240 // star边框颜色设置
241 context.strokeStyle = style.borderColor;
242 context.lineWidth = 1;
243
244 // 绘制star的顶点坐标
245 var x = radius,
246 y = 0;
247
248 for (var i = 0; i < counts; i++) {
249
250 // star绘制
251 context.beginPath();
252 var x1 = size * Math.sin(Math.PI / 10);
253 var h1 = size * Math.cos(Math.PI / 10);
254 var x2 = radius;
255 var h2 = radius * Math.tan(Math.PI / 5);
256 context.lineTo(x + x1, y + h1);
257 context.lineTo(x - radius, y + h2);
258 context.lineTo(x + radius, y + h2);
259 context.lineTo(x - x1, y + h1);
260 context.lineTo(x - x1, y + h1);
261 context.lineTo(x, y);
262 context.closePath();
263 context.stroke();
264 context.fill();
265 x = (i + 1.5) * size;
266 y = 0;
267 context.moveTo(x, y);
268 }
269 }
270
271 // 参数设置与函数调用
272 var size = 20;
273 var rating = 6;
274 var counts = 5;
275 var style = {
276 borderColor: "#FFFFFF",
277 fillColor: "#FFD700",
278 spaceColor: "#D5D5D5"
279 };
280 var A_myCanvas = document.getElementById("A_myCanvas");
281
282 showRatingStars(A_myCanvas, rating/2.0, counts, size, style);
283 </script>
284
285 <!--IMDB评分-->
286 <script>
287 /**
288 * showRatingStars 显示评分星级
289 * @param {Object} myCanvas 画布对象
290 * @param {Number} rating 评分
291 * @param {Number} counts star个数
292 * @param {Number} size star大小
293 * @param {Object} style star样式
294 * Example: style = {
295 * borderColor:"#21DEEF",
296 * fillColor:"#21DEEF",
297 * spaceColor:"#FFFFFF"
298 * }
299 * @return none
300 */
301 function showRatingStars(I_myCanvas, rating, counts, size, style) {
302
303 // 检测rating与star数目是否合适
304 if (rating > 2*counts) {
305
306 alert("Please set suitable rating and counts!");
307 return;
308 }
309
310 // 检测大小设置是否合适
311 if (I_myCanvas.offsetWidth < size * counts || I_myCanvas.offsetHeight < size) {
312
313 alert("Please set suitable size and I_myCanvas' size!");
314 return;
315 }
316
317 var context = I_myCanvas.getContext('2d');
318 var xStart = rating * size;
319 var yStart = 0;
320 var xEnd = (Math.ceil(rating) + 1) * size;
321 var yEnd = 0;
322 var radius = size / 2;
323
324 // 线性渐变，由左至右
325 var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
326 linear.addColorStop(0, style.fillColor);
327 linear.addColorStop(0.01, style.spaceColor);
328 linear.addColorStop(1, style.spaceColor);
329 context.fillStyle = linear;
330
331 // star边框颜色设置
332 context.strokeStyle = style.borderColor;
333 context.lineWidth = 1;
334
335 // 绘制star的顶点坐标
336 var x = radius,
337 y = 0;
338
339 for (var i = 0; i < counts; i++) {
340
341 // star绘制
342 context.beginPath();
343 var x1 = size * Math.sin(Math.PI / 10);
344 var h1 = size * Math.cos(Math.PI / 10);
345 var x2 = radius;
346 var h2 = radius * Math.tan(Math.PI / 5);
347 context.lineTo(x + x1, y + h1);
348 context.lineTo(x - radius, y + h2);
349 context.lineTo(x + radius, y + h2);
350 context.lineTo(x - x1, y + h1);
351 context.lineTo(x - x1, y + h1);
352 context.lineTo(x, y);
353 context.closePath();
354 context.stroke();
355 context.fill();
356 x = (i + 1.5) * size;
357 y = 0;
358 context.moveTo(x, y);
359 }
360 }
361
362 // 参数设置与函数调用
363 var size = 20;
364 var rating = 7.5;
365 var counts = 5;
366 var style = {
367 borderColor: "#FFFFFF",
368 fillColor: "#FFD700",
369 spaceColor: "#D5D5D5"
370 };
371 var I_myCanvas = document.getElementById("I_myCanvas");
372
373 showRatingStars(I_myCanvas, rating/2.0, counts, size, style);
374 </script>
任务看板
团队照片
