JS實現一個簡單的網頁鍾表


---恢復內容開始---

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

 

---恢復內容結束---


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM