编码
小练习，练习使用循环实现一个九九乘法表
- 第一步，最低要求：在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>
注意：判断时间记得考虑边界值