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

 更新时间:2015年12月23日 14:52:47   作者:秋叶为何落  
这篇文章主要介绍了JS实现的倒计时效果,列举了两则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程序设计有所帮助。

相关文章

  • 基于JavaScript代码实现随机漂浮图片广告

    基于JavaScript代码实现随机漂浮图片广告

    在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐
    2016-01-01
  • uniapp中获取位置信息处理步骤

    uniapp中获取位置信息处理步骤

    在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,本文给大家介绍uniapp中获取位置信息处理步骤,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • js中document.getElementByid、document.all和document.layers区分介绍

    js中document.getElementByid、document.all和document.layers区分介绍

    document.getElementById 是公共标准,被目前的所有主流浏览器支持,document.all只有IE支持,document.layers是Netscape 4.x专有的属性
    2011-12-12
  • Javascript中数组去重与拍平的方法示例

    Javascript中数组去重与拍平的方法示例

    这篇文章主要介绍了Javascript中数组去重与拍平的相关资料,因为这是实际业务开发中经常遇到的,文中开始先进行了数组的判断介绍,因为在处理数组之前判断数据是不是数组很重要,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • JS事件循环机制event loop宏任务微任务原理解析

    JS事件循环机制event loop宏任务微任务原理解析

    这篇文章主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • js中substring和substr的定义和用法

    js中substring和substr的定义和用法

    这篇文章主要介绍了js中substring和substr的定义和用法,需要的朋友可以参考下
    2014-05-05
  • JavaScript实现页面一键全选或反选

    JavaScript实现页面一键全选或反选

    这篇文章主要为大家详细介绍了JavaScript实现页面一键全选或反选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS 调试中常见的报错问题解决方法

    JS 调试中常见的报错问题解决方法

    下面小编就为大家带来一篇JS 调试中常见的报错问题解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 教你巧用webpack在日志中记录文件行号

    教你巧用webpack在日志中记录文件行号

    早期webpack的目的是允许在浏览器中运行大多数node.js模块,但是模块整体格局发生了变化,现在许多模块的主要用途是以编写前端为目的,下面这篇文章主要给大家介绍了关于巧用webpack在日志中记录文件行号的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论