1.Date对象-优快云博客

本文介绍了一个使用JavaScript实现的动态时钟特效案例。通过三个按钮控制时钟的启动、停止及延迟显示，具体包括：获取当前时间、显示时间、设置定时器等功能。此案例适用于初学者了解JavaScript操作DOM及时钟函数的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>Date对象的使用-时钟特效</title>
 6 <script type="text/javascript">
 7 window.onload=function(){
 8   //获取第一个input标签
 9    var inputone=document.getElementsByTagName("input")[0];
10    
11    //给input标签添加点击事件
12    inputone.onclick=function(){
13      setTimeout("timeFun()",2000);
14    }
15    
16    //获取第2个input标签
17    var inputtwo=document.getElementsByTagName("input")[1];
18    
19    //给input标签添加点击事件
20   var timestr;
21    inputtwo.onclick=function(){
22      timestr=setInterval("timeFun()",1000);
23    }
24    
25     //获取第2个input标签
26    var inputthree=document.getElementsByTagName("input")[2];
27    
28    //给input标签添加点击事件
29    inputthree.onclick=function(){
30       clearInterval(timestr);
31    }
32 
33 }
34 
35 function timeFun(){
36    var date=new Date();
37    var year=date.getFullYear(); //获取四位年份
38    var month=date.getMonth()+1; //月份
39    var day =date.getDate(); //一个月中某一天,范围1-31
40    var week=date.getDay(); //星期
41    var hour=date.getHours(); //小时数,24进制
42    var minutes=date.getMinutes(); //分钟
43    var second=date.getSeconds();  //秒
44    var time=year+"年"
45            +month+"月"
46            +day+"日  星期"+week+"  "
47            +hour+"时"+minutes+"分"+second+"秒"; 
48         console.log(time);
49    document.getElementsByTagName("div")[0].innerHTML=time;
50   
51    
52 }
53 </script>
54 </head>
55 
56 <body>
57 <input type="button" value="3秒后出现"/>
58 <input type="button" value="动态时钟"/>
59 <input type="button" value="停止时钟"/>
60 <div id="time">
61 </div>
62 </body>
63 </html>