JavaScript時鍾效果


  在JavaScript中,有一個內置對象Date,它重要的一個作用就是實現了時間的時刻更新,通過代碼來創造一個實實在在的時間表。

  代碼例子:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4         <meta charset="UTF-8">
 5         <meta name="author" content="驚風" />
 6         <meta name="Genarator" content="sublime"/>
 7     <title>時間的實現</title>
 8     <style type="text/css">
 9        #timetxt{
10              width:100px;
11              height:40px;
12              background-color:#EABC46;
13              font-size:20px;
14              line-height:40px;
15              margin:auto auto;
16              text-align:center;
17        }
18     </style>
19     <script type="text/javascript">
20        function startTime(){
21 
22           var today=new Date(); //定義時間
23           var h=today.getHours();  //小時
24           var m=today.getMinutes();  //分鍾
25           var s=today.getSeconds();  //
26  
27           //調用函數
28            h=checkTime(h);
29 
30            m=checkTime(m);
31 
32            s=checkTime(s);
33 
34           document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //時間顯示的格式
35           t=setTimeout(function(){
36 
37             startTime();
38 
39           },500);//500,是延時顯示的意思,即500毫秒更新一次
40 
41        }
42  
43        //當分鍾和秒是一位時候,需要在前面加0(才更符合要求)
44        function checkTime(i){
45 
46          if(i<10){
47 
48            i="0"+i;
49 
50          }
51 
52          return i;
53 
54        }
55 
56        </script>
57 </head>
58     <body onload="startTime()">
59        <div id="timetxt"></div>
60     </body>
61 </html>


免責聲明!

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



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