JS实现的倒计时效果实例(2则实例)

前端技术 2023/09/06 JavaScript

本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考，具体如下：

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果，就是多少秒之后注册这个按钮才可以点击，其目的就是强迫你去看他的注册注意事项，这是一个很实用的效果；另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果，这种倒计时效果是如何实现的呢？下面我们就用Js来实现一个倒计时效果，具体代码：

html页面：

<html> 
 <head> 
  <title>倒计时</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>剩余时间为：</h2> 
   <div id = \"timer\"> 
   </div> 
  </div> 
 </body> 
</html>

timer.js：

function timer() 
{
 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
 dd = checkTime(dd);
 hh = checkTime(hh);
 mm = checkTime(mm);
 ss = checkTime(ss);
 document.getElementById(\"timer\").innerHTML = dd + \"天\" + hh + \"时\" + mm + \"分\" + ss + \"秒\";
 setInterval(\"timer()\",1000);
}
function checkTime(i)
{
  if (i < 10) {
  i = \"0\" + i;
 }
  return i;
}

运行效果截图如下：

再来看看另一个JS倒计时效果：

<!doctype html>
<html>
<head>
 <meta charset=\"utf-8\">
 <title>倒计时js代码</title>
</head>
<body>
<DIV id=\"CountMsg\" class=\"HotDate\">
 <span id=\"t_d\">00天</span>
 <span id=\"t_h\">00时</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\'); //截止时间
  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 + \"时\";
  document.getElementById(\"t_m\").innerHTML = m + \"分\";
  document.getElementById(\"t_s\").innerHTML = s + \"秒\";
 }
 setInterval(getRTime,1000);
 </script>
</body>
</html>

运行效果截图如下：

读者可以按照自己的喜好选择一款倒计时代码使用。

希望本文所述对大家JavaScript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15883

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案