首页 > > 网页制作 > Javascript >

百度前端学院参考答案：第二十五天到第二十七天 …

2018-12-09 11:19:59来源：博客园阅读 ()

编码

我们现在来做一个最简单的时钟，通过小练习来学习 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>