首页 > 代码库 > 使用延时器实现动态时钟

使用延时器实现动态时钟

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>使用延时器实现动态时钟</title>
 6     <meta name="keywords" content="关键字列表" />
 7     <meta name="description" content="网页描述" />
 8     <link rel="stylesheet" type="text/css" href="" />
 9     <style type="text/css">
10         div{
11             margin:auto;
12             width:400px;
13             height:400px;
14             line-height:400px;
15             border:1px;
16             background-Color:gold;
17             margin-top:100px;
18             text-align:center;
19             }
20     </style>
21     
22 </head>
23 <body>
24     <div id=‘div1‘></div>
25     <script type="text/javascript">
26         var yue = [01,02,03,04,05,06,07,08,09,10,11,12]
27         function getTimes()
28         {
29             var myDate = new Date ();
30             var y       = myDate.getFullYear();
31             var m       = yue[myDate.getMonth()];
32             var t      = i(myDate.getDate());
33             var h      = i(myDate.getHours());
34             var f      = i(myDate.getMinutes());
35             var s      = i(myDate.getSeconds());
36 
37             var str = y++m++t+日&nbsp;+h+:+f+:+s;
38             var div_obj = document.getElementById("div1")
39 
40             div_obj.innerHTML = str;
41             setTimeout("getTimes()",1000);
42         
43         }
44         getTimes();
45         function i(m)
46         {
47             return m<10? 0+m :m;
48         }
49     
50     
51     
52     </script>
53 </body>
54 </html>
View Code

效果图:技术分享

 

使用延时器实现动态时钟