js倒计时大全(读取本地时间)-阿里云开发者社区

开发者社区> 开发与运维> 正文

js倒计时大全(读取本地时间)

简介:

已测试,兼容各浏览器。

第一个:


  1. <script language="JavaScript">   
  2. var timedate= new Date("January 1,2013");   
  3. var now = new Date();   
  4. var date = timedate.getTime() - now.getTime();  
  5. alert(now.getTime()); 
  6. var startTime = new Date();   
  7. var EndTime=startTime.getTime()+60*1000;   
  8. var submitcount = 1;   
  9. function GetRTime(){   
  10.   var NowTime = new Date();   
  11.   var nMS =EndTime - NowTime.getTime();   
  12.   var nH=Math.floor(nMS/(1000*60*60)) % 24;   
  13.   var nM=Math.floor(nMS/(1000*60)) % 60;   
  14.   var nS=Math.floor(nMS/1000) % 60;   
  15.    
  16.    document.getElementById("RemainH").innerHTML=nH;   
  17.    document.getElementById("RemainM").innerHTML=nM;   
  18.    document.getElementById("RemainS").innerHTML=nS;   
  19.   if ((nM==0 && nS==0) || nS<0 || nM<0)   
  20.   {   
  21.     if (submitcount)   
  22.     {   
  23.       document.getElementById("allst").submit();   
  24.       document.getElementById("jiaojuan").disabled='disabled';   
  25.       submitcount=0;   
  26.     }   
  27.   }else{   
  28.     if (submitcount) setTimeout("GetRTime()",1000);   
  29.   }   
  30. }   
  31. window.onload=GetRTime;   
  32. </script>   
  33. <b>还剩:</b><strong id="RemainH">0</strong>时<strong id="RemainM">0</strong>分<strong id="RemainS">0</strong>秒  

 

第二个:


  1. <script type="text/javascript"
  2.     var $ = function(id){ return document.getElementById(id)}; 
  3.     function getDate(t){ 
  4.         with(t)return [getFullYear(),'年' 
  5.             ,('0'+(getMonth()+1)).slice(-2),'月' 
  6.             ,('0'+getDate()).slice(-2),'日 ' 
  7.             ,('0'+getHours()).slice(-2),': ' 
  8.             ,('0'+getMinutes()).slice(-2),': ' 
  9.             ,('0'+getSeconds()).slice(-2)].join('');     
  10.     } 
  11.  
  12.     function getDiffDate(m){ 
  13.         m-=(D=parseInt(m/86400000))*86400000; 
  14.         m-=(H=parseInt(m/3600000))*3600000; 
  15.         S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000); 
  16.         return D+'天'+H+'时'+M+'分'+S+'秒'
  17.     } 
  18.     window.onload = function(){ 
  19.         setInterval(function(){ 
  20.             $("ospanTime").innerHTML = getDate(new Date()); 
  21.             $("diffTime").innerHTML = getDiffDate(new Date('2012/12/24')-new Date()); 
  22.             }, 1000);     
  23.     }         
  24. </script> 
  25. 当前时间:<span id="ospanTime" style="color:#FF0000;font-weight:bold"></span><br/> 
  26. 距离2012年12月24日:<span id="diffTime" style="color:#FF0000;font-weight:bold"></span> 

 

第三个(需要在<body>中加入onload调用):


  1. <html> 
  2. <head> 
  3. <title>倒计时测试</title> 
  4. <!--倒计时设置代码--> 
  5. <script language="JavaScript"> 
  6. <!-- hide script from old browser 
  7. var DifferenceHour = -1 
  8. var DifferenceMinute = -1 
  9. var DifferenceSecond = -1 
  10. var Tday = new Date("July 1, 2013 00:00:00")   //**倒计时时间点-注意格式 
  11. var daysms = 24 * 60 * 60 * 1000 
  12. var hoursms = 60 * 60 * 1000 
  13. var Secondms = 60 * 1000 
  14. var microsecond = 1000 
  15. function clock() 
  16. var time = new Date() 
  17. var hour = time.getHours() 
  18. var minute = time.getMinutes() 
  19. var second = time.getSeconds() 
  20. var timevalue = ""+((hour > 12) ? hour-12:hour) 
  21. timevalue +=((minute < 10) ? ":0":":")+minute 
  22. timevalue +=((second < 10) ? ":0":":")+second 
  23. timevalue +=((hour >12 ) ? " PM":" AM") 
  24. // document.formnow.now.value = timevalue 
  25. var convertHour = DifferenceHour 
  26. var convertMinute = DifferenceMinute 
  27. var convertSecond = DifferenceSecond 
  28. var Diffms = Tday.getTime() - time.getTime() 
  29. DifferenceHour = Math.floor(Diffms / daysms) 
  30. Diffms -DifferenceHour * daysms 
  31. DifferenceMinute = Math.floor(Diffms / hoursms) 
  32. Diffms -DifferenceMinute * hoursms 
  33. DifferenceSecond = Math.floor(Diffms / Secondms) 
  34. Diffms -DifferenceSecond * Secondms 
  35. var dSecs = Math.floor(Diffms / microsecond) 
  36. if(convertHour != DifferenceHour) document.formnow.dd.value=DifferenceHour 
  37. if(convertMinute != DifferenceMinute) document.formnow.hh.value=DifferenceMinute 
  38. if(convertSecond != DifferenceSecond) document.formnow.mm.value=DifferenceSecond 
  39. document.formnow.ss.value=dSecs 
  40.  
  41. document.getElementById("ddd").innerHTML=DifferenceHour
  42. document.getElementById("hhh").innerHTML=DifferenceMinute
  43. document.getElementById("mmm").innerHTML=DifferenceSecond
  44. document.getElementById("sss").innerHTML=dSecs
  45.  
  46. // document.formnow.Tnow.valueDifferenceHour DifferenceMinute + DifferenceSecond + dSecs 
  47. setTimeout("clock()",1000) 
  48. // end hiding --> 
  49. </script> 
  50. </head> 
  51. <!--BODY里面的ONLOAD注意--> 
  52. <body onload="clock();return true"> 
  53. <!--实现显示--> 
  54.  
  55. 距离2013.07.01活动结束还有: 
  56. <div style="font-size:30px;background:#369"> 
  57.     <span id="ddd"></span><span id="hhh"></span>小时<span id="mm"></span>分钟<span id="ss"></span>秒 
  58.     <form name="formnow"> 
  59.         <input name="dd" type="text" style="border:0; color:red; width:15px">天 
  60.         <input name="hh" type="text" style="border:0; color:red; width:15px">时 
  61.         <input name="mm" type="text" style="border:0; color:red; width:15px">分 
  62.         <input name="ss" type="text" style="border:0; color:red; width:15px">秒 
  63.     </form> 
  64. </div> 
  65. </body> 
  66. </html> 

 

 

07月17日 今天找到了一个更好的,分享(精确到毫秒,很酷):

 

 


  1. <script language="JavaScript">   
  2.     function ShowTimes(){  
  3.         var AfterTimenew Date("July 18 00:00:00  2012");  
  4.         LeaveTime = AfterTime - new Date();  
  5.         LeaveDays=Math.floor(LeaveTime/(1000*60*60*24));//天    
  6.         LeaveHours=Math.floor(LeaveTime/(1000*60*60)%24);//时    
  7.         LeaveMinutes=Math.floor(LeaveTime/(1000*60)%60);//分    
  8.         LeaveSeconds=Math.floor(LeaveTime/1000%60);//秒    
  9.         var c=new Date();  
  10.         var q=c.getMilliseconds();  
  11.         if(q<10){                               //因为毫秒为一位数时只占一个字符位置,会让毫秒二字变动位置   
  12.            q="00"+c.getMilliseconds();    
  13.         }    
  14.         if(q>=10 && q<100){                     //因为毫秒为两位数时只占两个字符位置,会让毫秒二字变动位置  
  15.             q="0"+c.getMilliseconds();    
  16.         }  
  17.     if(LeaveDays<0){ 
  18.     document.getElementById("tian").innerHTML='00';  
  19.     } 
  20.     else{ 
  21.     document.getElementById("tian").innerHTML=LeaveDays;  
  22.     } 
  23.      
  24.     if(LeaveHours<0){ 
  25.     document.getElementById("shi").innerHTML='00';  
  26.     } 
  27.     else{ 
  28.     document.getElementById("shi").innerHTML=LeaveHours;  
  29.     } 
  30.      
  31.     if(LeaveMinutes<0){ 
  32.     document.getElementById("fen").innerHTML='00';  
  33.     } 
  34.     else{ 
  35.     document.getElementById("fen").innerHTML=LeaveMinutes;  
  36.     } 
  37.      
  38.     if(LeaveSeconds<0){ 
  39.     document.getElementById("miao").innerHTML='00';  
  40.     } 
  41.     else{ 
  42.     document.getElementById("miao").innerHTML=LeaveSeconds;  
  43.     }  
  44.         hxtime.innerHTML="<font color=red>"+LeaveDays+"</font><font color=red>"+LeaveHours+"</font><font color=red>"+LeaveMinutes+"</font><font color=red>"+LeaveSeconds+"</font><font color=red>"+q+"</font>毫秒";    
  45.     }    
  46.     setInterval(ShowTimes,10);    
  47.     </script>  
  48.     <div id="hxtime"></div>  
  49.     <div id="tian"></div>   
  50.     <div id="shi"></div>   
  51.     <div id="fen"></div>   
  52.     <div id="miao"></div>  

本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/914800,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章