Countdown effect examples implemented by JS (2 examples)

Countdown effect examples implemented by JS (2 examples)_javascript skills

WBOY

Release： 2016-05-16 15:23:57

Original

1414 people have browsed it

The example in this article describes the countdown effect implemented by JS. Share it with everyone for your reference, the details are as follows:

We often see that some websites like to have a button countdown effect when registering, which is how many seconds it takes to register before you can click the button. The purpose is to force you to read its registration precautions. This is a A very practical effect; in addition, when we take online exams, we will definitely encounter the countdown effect. How is this countdown effect achieved? Next we will use Js to implement a countdown effect, the specific code:

html page:

<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>

Copy after login

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;
}

Copy after login

The screenshot of the running effect is as follows:

Let’s take a look at another JS countdown effect:

<!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>

Copy after login

The screenshot of the running effect is as follows: