---恢复内容开始---
下午又练习了一下计算器，这回是自己背着写的。后来主要研究、编写了网页钟表的代码。学习到了innerHTML属性和setInterval()方法。
innerHTML属性的用法： 对象.innerHTML = HTML (HTML代码。)
下面是innerHTML、outerHTML、innerText和outerText的定义。
- innerHTML 设置或获取位于对象起始和结束标签内的 HTML
- outerHTML 设置或获取对象及其内容的 HTML 形式
- innerText 设置或获取位于对象起始和结束标签内的文本
- outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。
有一张图可以直观的说明这个问题。如下：
下面呢就是我今天练习的网页钟表HTML和JS代码，有不足的地方还请大神指点。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>时钟</title> 6 <style> 7 div{ 8 50%; 9 margin: 0 auto; 10 text-align: center; 11 } 12 span:first-child{ 13 font-size: 60px; 14 } 15 span:last-child{ 16 font-size: 30px; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 <span id="date"></span><br> 23 <span id="clock"></span> 24 </div> 25 <script src="jquery-1.11.1.js"></script> 26 <script> 27 function myClock(){ //定义一个名为myClock的函数。 28 29 var date = new Date(); //构造日期对象。 30 document.getElementById("date").innerHTML = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); // 找到 id名为date的span标签，innerHTML属性中添加HTML代码，这里添加的是要在span标签中显示的时间。getMonth方法加1的原因是因为在JS中月份是从0开始的。 31 document.getElementById("clock").innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); 32 } 33 window.setInterval(myClock,1000); //间隔是1000ms，重复执行myClock函数中的内容。 34 </script> 35 </body> 36 </html>
---恢复内容结束---