百度前端学院参考答案:第二十五天到第二十七天 倒数开始 滴答滴 滴答滴(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需要写在函数内部,每次都要获取新的时间。