>

JS实现的倒计时效果实例

- 编辑:正版管家婆马报彩图 -

JS实现的倒计时效果实例

本文实例陈诉了JS完毕的倒计时效果。分享给大家供大家参谋,具体如下:

JS完成的倒计时效果实例(2则实例),

正文实例陈诉了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;
}

运维作效果果截图如下:

图片 1

再来看看另三个JS倒计时效率:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
 00天
 00时
 00分
 00秒
</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> 

运行效果截图如下:

图片 2

读者能够依据本人的喜好选用一款倒计时代码应用。

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

大家平常会看出有些网址在注册的时候欣赏搞个按键倒计时的成效,就是稍飞秒将来注册这些按键才方可点击,其目标正是迫让你去看她的挂号注意事项,这是贰个很实用的功效;另外当大家开展在线考试的时候也必定会碰着答题倒计时的作用,这种倒计时效果是什么贯彻的啊?上面大家就用Js来落实多个倒计时效果,具体代码:

你大概感兴趣的稿子:

  • js倒计时抢购实例
  • js代码实现点击按钮出现60秒倒计时
  • js达成n秒倒计时后才具够点击的功用
  • js倒计时轻巧达成格局
  • js完毕新禧倒计时效果与利益
  • js完结的奥林匹克运动倒计时石英钟效果代码
  • JS达成的仿天猫商城交易倒计时效果
  • javascript电商网址抢购倒计时效果完成
  • 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;
}

运营效果截图如下:

图片 3

再来看看另叁个JS倒计时效力:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
 00天
 00时
 00分
 00秒
</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> 

运转效果截图如下:

图片 4

读者能够遵照自个儿的喜好接纳一款倒计时期码应用。

愿意本文所述对咱们JavaScript程序设计有着扶助。

您也许感兴趣的稿子:

  • js倒计时抢购实例
  • js代码达成点击按键出现60秒倒计时
  • js完毕n秒倒计时后技术够点击的作用
  • js倒计时简短完毕格局
  • js完毕新岁倒计时效用
  • js达成的奥林匹克运动倒计时石英钟效果代码
  • JS达成的仿天猫交易倒计时效果
  • javascript电商网址抢购倒计时效果完毕
  • javascript倒计时效应实现
  • js完毕点击获取验证码倒计时效果

本文由计算机操作发布,转载请注明来源:JS实现的倒计时效果实例