1、创建part1.html
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>
2、效果图
3、点击“三秒后出现”
4、点击动态时钟
5、点击停止时钟，时间将停止各秒刷新