编码
我们现在来做一个最简单的时钟，通过小练习来学习 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需要写在函数内部，每次都要获取新的时间。