快捷導(dǎo)航

JS實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例(2則實(shí)例)

更新時(shí)間：2015年12月23日 14:52:47 作者：秋葉為何落

這篇文章主要介紹了JS實(shí)現(xiàn)的倒計(jì)時(shí)效果,列舉了兩則JavaScript倒計(jì)時(shí)效果代碼供大家參考,原理基本相似,代碼簡(jiǎn)潔實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的倒計(jì)時(shí)效果。分享給大家供大家參考，具體如下：

我們經(jīng)常會(huì)看到某些網(wǎng)站在注冊(cè)的時(shí)候喜歡搞個(gè)按鈕倒計(jì)時(shí)的效果，就是多少秒之后注冊(cè)這個(gè)按鈕才可以點(diǎn)擊，其目的就是強(qiáng)迫你去看他的注冊(cè)注意事項(xiàng)，這是一個(gè)很實(shí)用的效果；另外當(dāng)我們進(jìn)行在線考試的時(shí)候也必定會(huì)碰到答題倒計(jì)時(shí)的效果，這種倒計(jì)時(shí)效果是如何實(shí)現(xiàn)的呢？下面我們就用Js來實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)效果，具體代碼：

html頁(yè)面：

<html> 
 <head> 
  <title>倒計(jì)時(shí)</title> 
  <!--以下為css樣式--> 
  <style type= "text/css"> 
   .daojishi h2 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    margin-bottom:5px; 
    color:#151515; 
   } 
   .daojishi #timer 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    color:#151515; 
    font-weight:bold; 
   } 
  </style> 
  <script type = "text/javascript" src = "timer.js"> 
  </script> 
 </head> 
 <body onload = "timer()"> 
  <div class = "daojishi"> 
   <h2>剩余時(shí)間為：</h2> 
   <div id = "timer"> 
   </div> 
  </div> 
 </body> 
</html>

timer.js：

function timer() 
{
 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//計(jì)算剩余的毫秒數(shù)
 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//計(jì)算剩余的天數(shù)
 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//計(jì)算剩余的小時(shí)數(shù)
 var mm = parseInt(ts / 1000 / 60 % 60, 10);//計(jì)算剩余的分鐘數(shù)
 var ss = parseInt(ts / 1000 % 60, 10);//計(jì)算剩余的秒數(shù)
 dd = checkTime(dd);
 hh = checkTime(hh);
 mm = checkTime(mm);
 ss = checkTime(ss);
 document.getElementById("timer").innerHTML = dd + "天" + hh + "時(shí)" + mm + "分" + ss + "秒";
 setInterval("timer()",1000);
}
function checkTime(i)
{
  if (i < 10) {
  i = "0" + i;
 }
  return i;
}

運(yùn)行效果截圖如下：

再來看看另一個(gè)JS倒計(jì)時(shí)效果：

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>倒計(jì)時(shí)js代碼</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
 <span id="t_d">00天</span>
 <span id="t_h">00時(shí)</span>
 <span id="t_m">00分</span>
 <span id="t_s">00秒</span>
</DIV>
<script type="text/javascript">
 function getRTime(){
  var EndTime= new Date('2016/05/1 10:00:00'); //截止時(shí)間
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  /*var d=Math.floor(t/1000/60/60/24);
  t-=d*(1000*60*60*24);
  var h=Math.floor(t/1000/60/60);
  t-=h*60*60*1000;
  var m=Math.floor(t/1000/60);
  t-=m*60*1000;
  var s=Math.floor(t/1000);*/
  var d=Math.floor(t/1000/60/60/24);
  var h=Math.floor(t/1000/60/60%24);
  var m=Math.floor(t/1000/60%60);
  var s=Math.floor(t/1000%60);
  document.getElementById("t_d").innerHTML = d + "天";
  document.getElementById("t_h").innerHTML = h + "時(shí)";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
 }
 setInterval(getRTime,1000);
 </script>
</body>
</html>

運(yùn)行效果截圖如下：