• 百度前端学院参考答案:第二十五天到第二十七天 倒数开始 滴答滴 滴答滴(1)


    编码

    我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装
    具体需求如下:

    • 在页面中显示当前日期及时间,按秒更新
    • 格式为 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss
    • 注意位数的补齐,比如:
      -- 假设时间为2008年10月10日星期一的12点12分12秒,显示2008年10月10日星期一 12:12:12
      -- 假设时间为2008年1月1日星期一的3点2分2秒,显示2008年01月01日星期一 03:02:02

    编码过程中,我们希望你注意对函数的封装,尽量让一个函数就做一个事情,而不要把所有的功能、代码揉在一起:

    • 封装一个函数,来根据某个日期返回这一天是星期几
    • 封装一个函数,把月、日、小时等出现个位数的情况前面补充0,补充为两位,比如1变为01
    • 封装一个函数,把最后的日期时间,按照要求的格式进行包装
    • 可能不止上面这些,尽可能地进行功能的解耦和拆解

    编码

    完成上面需求后,现在需求做一些小的变更

    • 输出格式变为:2008-10-10 Monday 07:10:30 PM

    编码

    基于上面的需求,要求,同时在页面上,输出两种格式的日期时间
    希望通过上面的练习,让你体会函数的概念、作用和价值

    参考:

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5     <meta charset="utf-8" />
      6     <title>函数和时钟练习1</title>
      7 </head>
      8 
      9 <body>
     10     <p id="date"></p>
     11     <script>
     12         var datetxt = document.getElementById("date");
     13         //第一种星期显示格式
     14         function getWeekday1(weekday) {
     15             switch (weekday) {
     16                 case 0:
     17                     weekday = "星期日";
     18                     break;
     19                 case 1:
     20                     weekday = "星期一";
     21                     break;
     22                 case 2:
     23                     weekday = "星期二";
     24                     break;
     25                 case 3:
     26                     weekday = "星期三";
     27                     break;
     28                 case 4:
     29                     weekday = "星期四";
     30                     break;
     31                 case 5:
     32                     weekday = "星期五";
     33                     break;
     34                 case 6:
     35                     weekday = "星期六";
     36                     break;
     37             }
     38             return weekday;
     39         }
     40 //第二种星期显示格式
     41         function getWeekday2(weekday) {
     42             switch (weekday) {
     43                 case 0:
     44                     weekday = "Sunday";
     45                     break;
     46                 case 1:
     47                     weekday = "Monday";
     48                     break;
     49                 case 2:
     50                     weekday = "Tuesday";
     51                     break;
     52                 case 3:
     53                     weekday = "Wednesday";
     54                     break;
     55                 case 4:
     56                     weekday = "Thursday";
     57                     break;
     58                 case 5:
     59                     weekday = "Friday";
     60                     break;
     61                 case 6:
     62                     weekday = "Saturday";
     63                     break;
     64             }
     65             return weekday;
     66         }
     67 //作为补零函数
     68         function addZero(a) {
     69             if (a < 10) {
     70                 a = "0" + a;
     71             }
     72             return a;
     73         }
     74 //判断时间超过12点就-12
     75         function changeHour(hour) {
     76             if (hour > 12) {
     77                 hour = hour - 12;
     78             }
     79             return hour;
     80         }
     81 //第一种时钟显示格式
     82         function startTime1() {
     83             var newdate = new Date(); //获取时间要写在内部 不然只是获取加载时的第一次日期对象,并不更新
     84             var year = newdate.getFullYear();
     85             var month = newdate.getMonth() + 1;
     86             var mon = addZero(month);
     87             var day = newdate.getDate();
     88             var d = addZero(day);
     89             var hour = newdate.getHours();
     90             var minute = newdate.getMinutes();
     91             var second = newdate.getSeconds();
     92             var h = addZero(hour);
     93             var m = addZero(minute);
     94             var s = addZero(second);
     95             datetxt.innerHTML = year + "" + mon + "" + d + "" + h + ":" + m + ":" + s;
     96             t = setTimeout("startTime1()", 500); //第一种调用函数
     97         }
     98 //第二种时钟显示格式
     99         function startTime2() {
    100             var newdate = new Date(); //获取时间要写在内部 不然只是获取加载时的第一次日期对象,并不更新
    101             var year = newdate.getFullYear();
    102             var month = newdate.getMonth() + 1;
    103             var mon = addZero(month);
    104             var day = newdate.getDate();
    105             var d = addZero(day);
    106             var weekday = getWeekday2(newdate.getDay());
    107             var hour = newdate.getHours();
    108             var minute = newdate.getMinutes();
    109             var second = newdate.getSeconds();
    110             var h = addZero(changeHour(hour));
    111             var m = addZero(minute);
    112             var s = addZero(second);
    113             if (hour < 12) {
    114                 datetxt.innerHTML = year + "-" + mon + "-" + d + " " + weekday + " " + h + ":" + m + ":" + s + " " +
    115                     "AM";
    116             } else {
    117                 datetxt.innerHTML = year + "-" + mon + "-" + d + " " + weekday + " " + h + ":" + m + ":" + s + " " +
    118                     "PM";
    119             }
    120             t = setTimeout(startTime2, 500); //第二种调用函数
    121         }
    122         //调用第一种时钟显示
    123         //startTime1();
    124         //调用第二种时钟显示
    125         startTime2();
    126     </script>
    127 </body>
    128 
    129 </html>

    注意点:获取星期和月份需要特殊处理才能对应上,如date.getMonth()+1=月份;

                   date.getDay()=0,代表周日,date.getDay()=1,代表周一。

                  函数要自身调用,才能实时更新时间,并且newDate需要写在函数内部,每次都要获取新的时间。

  • 相关阅读:
    Iphone [Tab Bar实现多view切换,Picker,DataPicter实现
    基于socket、多线程的客户端服务器端聊天程序
    C/C++面试题
    Unity3D打Box游戏
    Unity3D项目开发一点经验
    Unity3D使用过程中常见的20个问题
    @property中strong跟weak的区别
    java多线程系列8 高级同步工具(2)CountDownLatch
    java多线程系列7 高级同步工具(1)信号量Semaphore
    java多线程系列6 synchronized 加强版 ReentrantLock
  • 原文地址:https://www.cnblogs.com/Joe-and-Joan/p/10087853.html
Copyright © 2020-2023  润新知