1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>时间倒计时</title> 6 <style> 7 span{ 8 display: inline-block; 9 10 } 11 </style> 12 </head> 13 <body> 14 <center> 15 <span id="time">getbootstrap.com</span><br/> 16 <span id="time"></span><br/> 17 <span id="time1"></span><br/> 18 <span id="time2"></span><br/> 19 <span id="time3"></span><br/> 20 <span id="time4"></span><br/> 21 <span id="time5"></span><br/> 22 </center> 23 24 </body> 25 <script> 26 function show_time(){ 27 var now_time=new Date();//创建当前时间 28 // console.log(now_time.toLocaleString());//转化成本地时间 29 var new_time=new Date('2017,7,23');//设置活动时间 30 // console.log(new_time.toLocaleString()); 31 var cu_time=new_time.getTime()-now_time.getTime();//看时间差 32 // console.log(cu_time); 33 // console.log(new_time.getTime()); 34 // console.log(now_time.getTime()); 35 var cu_seconds=parseInt(cu_time/1000%60); 36 var cu_seconds1=parseInt(cu_time/1000); 37 //把所获得的时间差转化成秒，原值是毫秒转化单位是1000，%60是为了余数且取整，为了更好展示 38 //console.log(cu_seconds); 39 var cu_minutes=parseInt(cu_time/1000/60%60);//原来同上，转化为分钟，取余值且取整 40 var cu_minutes1=parseInt(cu_time/1000/60); 41 //console.log(cu_minutes); 42 var cu_hours=parseInt(cu_time/1000/60/60%24);//原来同上，转化为小时，取余值且取整 43 var cu_hours1=parseInt(cu_time/1000/60/60); 44 //console.log(cu_hours); 45 var cu_day=parseInt(cu_time/1000/60/60/24);//原来同上，转化为天,且取整 46 var cu_day1=parseInt(cu_time/1000/60/60/24/30); 47 // console.log(cu_day); 48 time.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天<font color='red' size='20px'>"+cu_hours+"</font>小时<font color='red' size='20px'>"+cu_minutes+"</font>分<font color='red' size='20px'>"+cu_seconds+'</font>秒'+"</h2>"; 49 time1.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day1+"</font>个月</h2>"; 50 time2.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天</h2>"; 51 time3.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_hours1+"</font>小时</h2>"; 52 time4.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_minutes1+"</font>分</h2>"; 53 time5.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_seconds1+"</font>秒</h2>"; 54 } 55 setInterval(show_time,500);//设置定时器500毫秒刷新一次 56 57 </script> 58 </html>