欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript时钟效果

程序员文章站 2024-01-01 21:01:52
在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。 代码例子: ......

  在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>

上一篇:

下一篇: