百度前端學院參考答案：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴（1）
阿新 • • 發佈：2018-12-08
編碼
我們現在來做一個最簡單的時鐘，通過小練習來學習 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需要寫在函式內部，每次都要獲取新的時間。