• 第一阶段(八)


    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 }

    截图:

    任务看板

    团队照片

  • 相关阅读:
    第2章 NIO入门
    Docker Compose命令详解
    网络层相关术语解释
    linux查看并发连接数
    带宽计算方法
    ELK日志分析平台搭建
    mysql查找json格式列的指定字段值
    Oracle性能优化
    修改hosts文件不需要重启的方法
    freeswitch的internal的profile无法启动
  • 原文地址:https://www.cnblogs.com/rainbow-1/p/14761467.html
Copyright © 2020-2023  润新知