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>

 

---恢复内容结束---

posted @ 2015-11-20 21:49  小洋的前端成长之路  阅读(7982)  评论(0)  编辑  收藏  举报