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