---恢復內容開始---
下午又練習了一下計算器,這回是自己背着寫的。后來主要研究、編寫了網頁鍾表的代碼。學習到了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 width: 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>
---恢復內容結束---
