【JavaScript 实现当前动态时间】
实现一个简单动态的当前时间
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style type="text/css"> 7 *{padding: 0;margin: 0;} 8 #timeShow{ 9 box-sizing: border-box; 10 width: 400px; 11 height: 130px; 12 padding-top: 30px; 13 border: 1px solid #000000; 14 border-radius: 5px; 15 margin: 200px auto; 16 text-align: center; 17 font-size: 28px; 18 font-family: cursive; 19 font-weight: bold; 20 } 21 </style> 22 </head> 23 <body onload="time()"> 24 <script type="text/javascript"> 25 var t = null; 26 t = setTimeout(time,1000);//开始执行 27 function time(){ 28 clearTimeout(t);//清除定时器 29 var d=new Date(); 30 var n=d.getFullYear(); 31 var y=d.getMonth()+1; 32 var r=d.getDate(); 33 var x=d.getDay(); 34 var h=d.getHours(); 35 var m=d.getMinutes(); 36 var s=d.getSeconds(); 37 var weekday=new Array(7) 38 weekday[0]="日"; 39 weekday[1]="一"; 40 weekday[2]="二"; 41 weekday[3]="三"; 42 weekday[4]="四"; 43 weekday[5]="五"; 44 weekday[6]="六"; 45 function ling(i){ 46 if(i<10){ 47 i = '0' + i; 48 } 49 return i; 50 } 51 document.getElementById("timeShow").innerHTML =n+"年"+ling(y)+"月"+ling(r)+"日<br />"+"星期"+weekday[x]+" "+ling(h)+":"+ling(m)+":"+ling(s); 52 t = setTimeout(time,1000); //设定定时器，循环执行 53 } 54 </script> 55 <div id="timeShow"></div> 56 </body> 57 </html>
这是效果图，做的比较简洁。当然有兴趣的可以加些漂亮的效果哦！