2021.05.10 杨传伟
任务:完成星级评分版块
代码部分:
1 <div id="main">
2 <div class="cat"></div>
3 <div class="content">
4 <div class="mvname"><h2>{{ title }}</h2></div>
5 <p class="picture"><img src="{{ img }}" height="200px" width="140px" /></p>
6 <p class="instroction">
7 导演: {{ director }} <br>
8 主演: {{ star }}<br>
9 类型:{{ type_movie }}<br>
10 制片国家/地区: {{ area }}<br>
11 语言: {{ language_movie }}<br>
12 上映日期: {{ date_time }}<br>
13 片长: {{ timelen }}<br>
14 </p>
15 <div id="bean" d="{{score}}" style="display:none"></div>
16 <div id="one" d="{{str_one}}" style="display:none"></div>
17 <div id="two" d="{{str_two}}" style="display:none"></div>
18 <div id="three" d="{{str_three}}" style="display:none"></div>
19 <div class="score">
20 <p class="star">豆瓣评分:<font size="5" face="arial" color="black">{{ score }}</font></p>
21 <canvas width="250" height="20" id="D_myCanvas"></canvas>
22 </div>
23 <script>
24 var one = document.getElementById('one').getAttribute('d');
25 var two = document.getElementById('two').getAttribute('d');
26 var three = document.getElementById('three').getAttribute('d');
27 var bean=document.getElementById('bean').getAttribute('d');
28 {#alert(one+two+three)#}
29 one_s=[]
30 two_s=[]
31 three_s=[]
32 appendUlBody ="";
33 if(one!="")
34 {
35 one_s=restr_s(one);
36 appendUlBody =appendUlBody+ "<p class='star'>腾讯视频评分:<font size='5' face='arial' color='black'>"+ one_s[1]+
37 "</font></p>" + "<canvas width='250' height='20' id='T_myCanvas'></canvas>"
38 }
39 if( two!="")
40 {
41 two_s=restr_s(two);
42 appendUlBody = appendUlBody+ "<p class='star'>爱奇艺评分:<font size='5' face='arial' color='black'>"+ two_s[1]+
43 "</font></p>" + "<canvas width='250' height='20' id='A_myCanvas'></canvas>"
44 }
45 if(three!="")
46 {
47 three_s=restr_s(three);
48 appendUlBody = appendUlBody+ "<p class='star'>IMDB评分:<font size='5' face='arial' color='black'>"+ three_s[1]+
49 "</font></p>" + "<canvas width='250' height='20' id='I_myCanvas'></canvas>"
50 }
51 $(".score").append(appendUlBody);
52 function restr_s(str){
53 if(str!=''){
54 str_s=str.split(", ")
55 for(i=0;i<str_s.length;i++){
56 if(i!=0&&i!=str_s.length-1){
57 str_s[i]=str_s[i].slice(1,str_s[i].length-1)
58 }else{
59 if(i==str_s.length-1){
60 str_s[i]=str_s[i].slice(1,str_s[i].length-2)
61 }else{
62 str_s[i]=str_s[i].slice(2,str_s[i].length-1)
63 }
64 }
65 }
66 }
67 return str_s;
68 }
69 </script>
70 <div class="collect">
71 <button class="button">想看</button>
72 <button class="button">在看</button>
73 <button class="button">看过</button>
74 </div>
75 <div class="story">
76 <div class="p1"><br>电影剧情简介 · · · · · ·</div>
77 <p class="p_story">{{summary}}
78 </p>
79 </div>
80 </div>
81 <div class="sidebar">
82 <div class="origin">
83 <div class="p1"><br>在哪儿看这部电影 · · · · · ·</div>
84 <div class="p2">
85 </div>
86 <script>
87 appendUlBody ="";
88 if(one!="")
89 {
90 one_s=restr_s(one);
91 appendUlBody =appendUlBody+ '<div class="p4"> <a href="'+one_s[2]+'" style="text-decoration:none;">腾讯视频</a></div>'+
92 '<div class="p3_1">'+one_s[3]+'</div><br><br>';
93 }
94 if( two!="")
95 {
96 two_s=restr_s(two);
97 appendUlBody =appendUlBody+ '<div class="p4"> <a href="'+two_s[2]+'" style="text-decoration:none;">爱奇艺</a></div>'+
98 '<div class="p3_1">'+two_s[3]+'</div><br>';
99 }
100 $(".p2").append(appendUlBody);
101 </script>
102 </div>
103 <p class="ad_right"></p>
104 </div>
105 </div>
2021.05.10 李楠
任务:完成星级评分版块
2021.05.10 章英杰
今天任务:对电影首页页面进行优化
经我们小组成员讨论,决定对电影首页页面布局及功能进行如下优化:
①对分类模块进行留白(添加侧边距)
②添加搜索查询按钮
③对头部导航栏添加背景图
④增加下滑式分页功能
⑤星级评分
今天主要完成了任务一,在原代码的基础上主要添加了两个CSS模块:
1 .classfiy_1 {
2 display:inline-block;
3 margin-top:15px;
4 margin-left: 200px;
5 margin-right: 50px;
6 }
7 .classfiy_2 {
8 width: 1100px;
9 height: 50px;
10 /*margin-left: 100px;*/
11 /**/
12 float: left;
13 }