夏日博客

A-A+

js 倒计时代码总结分享

2016年02月16日 前端设计 暂无评论 阅读 5 views 次

倒计时这种效果我们会经常看到有，特别是团购网站倒计时，下面我总结了一些常用的js倒计时效果代码，有需要的朋友可参考。

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消

setTimeout()

实例代码如下:

  1. function countdown(v,oid){  
  2.  if(v==true){//先用ajax取得倒计时的基数（只有第一次运行这个函数的时候才会做）  
  3.   $.get('json/get_countdown.php',function(data){  
  4.    dtime = data;//得到秒  
  5.    id = 'countdown';  
  6.    t=setTimeout('countdown(false,'+oid+')',1000);  
  7.   });  
  8.  }else if(v==false){  
  9.          clearTimeout(t);//这句很重要，不加这句的话在多次刷新页面的时候，倒计时会走的更快  
  10.   h=checkTime(parseInt(dtime/3600));//计算小时  
  11.   m=checkTime(parseInt(dtime/60%60));//计算分钟  
  12.   s=checkTime(parseInt(dtime%60));//计算秒  
  13.   $('#'+id).html(h+":"+m+":"+s);//将倒计时显示在一个html标签里面  
  14.   dtime=dtime-1;  
  15.   setTimeout('countdown(false,'+oid+')',1000);  

调用方法很简单 countdonw(v,id)即可。

再看一个代码如下:

  1. <title> 演示实例:倒计时效果-精确到秒 </title>  
  2. <meta http-equiv="content-type" content="text/html; charset=gb2312" />  
  3. <meta name="keywords" content="" />  
  4. <meta name="description" content="" />  
  5. <script language="JavaScript">  
  6. <!-- //  
  7. var overDate = 1000 * 60 * 60 * 24 * 3;//截止时间:为当前计算机时间+3天  
  8. var NowTime = new Date();  
  9. //var EndTime= new Date(2009,01,11,0,0);   
  10. var EndTime= new Date(NowTime.getTime() + overDate);  
  11. var EndTimeEndTimeMsg = EndTime.getFullYear() + "年";  
  12. EndTimeMsgEndTimeMsg = EndTimeMsg + (EndTime.getMonth()+1) + "月";  
  13. EndTimeMsgEndTimeMsg = EndTimeMsg + (EndTime.getDate()) + "日";  
  14. EndTimeMsgEndTimeMsg = EndTimeMsg + (EndTime.getHours()) + "时";  
  15. EndTimeMsgEndTimeMsg = EndTimeMsg + (EndTime.getMinutes()) + "分";  
  16. EndTimeMsgEndTimeMsg = EndTimeMsg + (EndTime.getSeconds()) + "秒";  
  17. function GetRTime(){  
  18.  NowTime = new Date();  
  19.  var nMS=EndTime.getTime() - NowTime.getTime();  
  20.  var nD=Math.floor(nMS/(1000 * 60 * 60 * 24));  
  21.  var nH=Math.floor(nMS/(1000*60*60)) % 24;  
  22.  var nM=Math.floor(nMS/(1000*60)) % 60;  
  23.  var nS=Math.floor(nMS/1000) % 60;  
  24.  var nMS=Math.floor(nMS/100) % 10;  
  25.  if(nD>= 0){  
  26.   document.getElementById("RemainD").innerHTML=nD;  
  27.   document.getElementById("RemainH").innerHTML=nH;  
  28.   document.getElementById("RemainM").innerHTML=nM;  
  29.   document.getElementById("RemainS").innerHTML=nS + "." + nMS;  
  30.  }  
  31.  else {  
  32.   document.getElementById("CountMsg").innerHTML=　EndTimeMsg +"已过！";  
  33.  }  
  34.  setTimeout("GetRTime()",100);  
  35. }  
  36. window.onload=function(){  
  37.     document.getElementById("EndTimeMsg").innerHTML = EndTimeMsg;  
  38.  GetRTime();  
  39. }  
  40. // -->  
  41. </script>  
  42. </head>  
  43. <body>  
  44. <div id="CountMsg">  
  45. 今天距离  
  46.  <strong id="EndTimeMsg">XX</strong>  
  47. 还有  
  48.  <strong id="RemainD">XX</strong>天  
  49.  <strong id="RemainH">XX</strong>时  
  50.  <strong id="RemainM">XX</strong>分  
  51.  <strong id="RemainS">XX</strong>秒  
  52. </div>  
标签：

给我留言