JavaScript页面倒计时功能完整示例

本文实例讲述了JavaScript页面倒计时功能。分享给大家供大家参考，具体如下：

效果图：

源码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net JS倒计时</title>
  <style>
    h3{text-align:center;line-height:50px;height:50px;margin-top:100px;}
    #timer{text-align:center;}
  </style>
</head>
<body>
<h3>倒计时</h3>
<p id="timer">00:00:00</p>
<script>
  var timeObj=document.getElementById("timer");
//  var startTime=new Date();
//  startTime=startTime.getTime();
//  var endTime="2017-4-20 19:30:00";
//  endTime=new Date(endTime.replace(/-/g,'/')).getTime();
//  var diffTime = endTime-startTime;
  var diffTime=400000;
  //-----------------------------------倒计时start--------------------------------
  function timeBack(){
    var timer = setInterval(function(){
      if(diffTime>=1000){
        diffTime -= 1000;
        timeObj.innerHTML = formatDate(diffTime);
      }
    },1000)
  }
  timeBack();
  function formatDate(maxtime) {
    var d = Math.floor(maxtime / (1000 * 60 * 60 * 24));
    var h = Math.floor(maxtime / (1000*3600)) - (d * 24);
    var m = Math.floor(maxtime / (1000*60)) - (d * 24 *60) - (h * 60);
    var s = Math.floor(maxtime / (1000)) - (d * 24 *60*60) - (h * 60 * 60) - (m*60);
    var hour=(d*24)+h,minutes=m,seconds=s;
    if(hour>100){
      hour=99
    }
    if(hour < 10){
      hour="0"+hour;
    }
    if (m < 10 ) {
      minutes = "0"+minutes
    }if(s <10){
      seconds = "0"+seconds;
    }
    return hour+":"+minutes+":"+seconds;
  }
</script>
</body>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线秒表工具：
http://tools.jb51.net/bianmin/miaobiao

在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器：
http://tools.jb51.net/jisuanqi/datecalc

Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime

更多关于JavaScript相关内容还可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 2种简单的js倒计时方式

    2种简单的js倒计时方式

    一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times > 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (

  • 一个不错的js html页面倒计时可精确到秒

    一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>

  • JS/jQ实现免费获取手机验证码倒计时效果

    JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

  • js实现网页倒计时、网站已运行时间功能的代码3例

    1.jQuery.countdown插件 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义.目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/例如: 复制代码 代码如下: <div id="getting-started"></div><script src="

  • javascript秒数倒计时自动跳转代码

    var secs =5; //倒计时的秒数 var URL ; function Load(url){ URL =url; for(var i=secs;i>=0;i--) { window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000); } } function doUpdate(num) { document.getElementById('ShowDiv').innerHTML = '将在'+num+'秒后自动跳转到 我们' ; if

  • Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页

  • 原生JS实现简单的倒计时功能示例

    原生JS实现简单的倒计时功能示例

    本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr

  • js代码实现点击按钮出现60秒倒计时

    js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • JS实现倒计时(天数、时、分、秒)

    JS实现倒计时(天数、时、分、秒)

    本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下 注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1

  • 团购、定时抢购倒计时js版

    团购.定时抢购倒计时 var tms = []; var day = []; var hour = []; var minute = []; var second = []; function takeCount() { setTimeout("takeCount()", 1000); for (var i = 0, j = tms.length; i 剩余时间: 0 天 0 小时 0 分 0 秒 tms[tms.length] = "168935343345";

  • js实现点击获取验证码倒计时效果

    js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

随机推荐