JS實現九九乘法表和時間問候語
阿新 • • 發佈：2019-02-03
編碼
小練習，練習使用迴圈實現一個九九乘法表
- 第一步，最低要求：在Console中按行輸出 n * m = t
- 然後，嘗試在網頁中，使用table來實現一個九九乘法表
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>九九乘法表table版</title> 7 </head> 8 9 <body onload="a()"> 10 <table id="table" border="1" > 11 12 </table> 13 <script> 14 function a() { 15 var t = document.getElementById("table"); 16 for (n = 9; n > 0; n--) { 17 var tr = document.createElement("tr"); 18 for(m = 1; m < n+1; m++) { 19 var td = document.createElement("td"); 20 var node = document.createTextNode(m + "*" + n + "=" + m * n); 21 td.appendChild(node); 22 tr.appendChild(td); 23 t.appendChild(tr);24 } 25 } 26 } 27 </script> 28 </body> 29 30 </html>
注意點：九九乘法表按照常規自增寫法會涉及重複部分重複公式，如1*2=2；2*1=2；所以我們採用m<n+1的寫法來遞減個數。
注意變數的重複定義，避免出現錯誤，一開始寫m*n=t，後來報錯，原來和table的變數衝突了，無法使用t.appendChild(tr)這個函式。
編碼
最後一個練習，在你的程式碼中，實現一個，當用戶訪問頁面的時候，根據當前時間，在頁面中輸出不同的問候語。
比如早上的時候，輸出早上好，晚上的時候是晚上好。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>九九乘法表table版</title> 7 </head> 8 9 <body onload="a()"> 10 <table id="table" border="1"> 11 12 </table> 13 <!-- 通過按鈕實現問候 --> 14 <!-- <button id="saytime" onclick="sayhello(date)">點選檢視時間問候</button> --> 15 <script> 16 var date = new Date(); 17 18 function sayhello() { 19 var hour = date.getHours(); 20 var minutes = date.getMinutes(); 21 var mytime = hour * 3600 + minutes * 60; 22 if (mytime >= 6 * 3600 && mytime < (11 * 3600 + 30 * 60)) { 23 alert("上午好，親愛的Joe！"); 24 } else if (mytime >= (11 * 3600 + 30 * 60) && mytime < (14 * 3600 + 30 * 60)) { 25 alert("中午好，親愛的Joe！"); 26 } else if (mytime >= (14 * 3600 + 30 * 60) && mytime < (18 * 3600)) { 27 alert("下午好，親愛的Joe！"); 28 } else { 29 alert("晚上好，親愛的Joe！"); 30 } 31 } 32 //網頁開啟就問候 33 sayhello(date); 34 35 function a() { 36 var t = document.getElementById("table"); 37 for (n = 9; n > 0; n--) { 38 var tr = document.createElement("tr"); 39 for (m = 1; m < n + 1; m++) { 40 var td = document.createElement("td"); 41 var node = document.createTextNode(m + "*" + n + "=" + m * n); 42 td.appendChild(node); 43 tr.appendChild(td); 44 t.appendChild(tr); 45 } 46 } 47 } 48 </script> 49 </body> 50 51 </html>
注意：判斷時間記得考慮邊界值