jQuery实现倒计时功能完整示例

本文实例讲述了jQuery实现倒计时功能。分享给大家供大家参考,具体如下:

demo代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>www.jb51.net 时间倒计时</title>
</head>
<body>
<form id="form1" runat="server">
  <div id="show">
  </div>
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function () {
    TimeDown("show", 3600000)
  });
  /*
   时间倒计时
   TimeDown.js
   */
  function TimeDown(id, value) {

    //倒计时的总秒数
    var totalSeconds = parseInt(value / 1000);

    //取模(余数)
    var modulo = totalSeconds % (60 * 60 * 24);
    //小时数
    var hours = Math.floor(modulo / (60 * 60));
    modulo = modulo % (60 * 60);
    //分钟
    var minutes = Math.floor(modulo / 60);
    //秒
    var seconds = modulo % 60;

    hours = hours.toString().length == 1 ? '0' + hours : hours;
    minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
    seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;

    //输出到页面
    document.getElementById(id).innerHTML = hours + ":" + minutes + ":" + seconds;
    //延迟一秒执行自己
    if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){

    }else{
      setTimeout(function () {
        TimeDown(id, value-1000);
      }, 1000)
    }

  }
</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/onlinedatejsq

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

(0)

相关推荐

  • jQuery 点击获取验证码按钮及倒计时功能

    1.具体思路 点击获取验证码按钮 -> 调用获取验证码接口(忽略)->获取验证码按钮切换到不可点击状态,按钮背景色呈灰色,按钮文字呈现为"倒计时秒数+后可重新获取"-> 倒计时60s后按钮恢复可点击状态,按钮背景呈橙色,按钮文字呈现为"重新发送" 2.HTML代码 <button type="button" class="feachBtn">获取验证码</button> 3.JS代码

  • jQuery 实现倒计时天,时,分,秒功能

    1.HTML部分 <span class="joind">135</span>天<span class="joinh">7</span>时<span class="joinm">46</span>分<span class="joins">25</span>秒 2.js部分 <script src="https://c

  • jquery实现手机发送验证码的倒计时代码

    复制代码 代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • jQuery实现商品活动倒计时

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能. 本文以团购网站的倒计时为背景,我们知道,网站会给每个优惠活动(商品)定一个结束时间,也就是到期时间,但系统时间到达了结束时间,就意味着活动结束.因此,我们在HTML中就要定义活动的结束时间. HTML <ul class="prolist"> <li><img src

  • jQuery实现发送验证码并60秒倒计时功能

    本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

  • jquery简单倒计时实现方法

    本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2

  • 利用jQuery实现漂亮的圆形进度条倒计时插件

    jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览    源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"><

  • jquery实现可关闭的倒计时广告特效代码

    本文实例讲述了jquery实现可关闭的倒计时广告特效代码.分享给大家供大家参考.具体如下: 这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来.希望大家喜欢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-close-time

  • JS/jquery实现一个网页内同时调用多个倒计时的方法

    本文实例讲述了jquery/js实现一个网页内同时调用多个倒计时的方法.分享给大家供大家参考,具体如下: 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! var plugJs={ stamp:0, tid:1, stampnow:'<?php echo NOW_TIME;?>',//统一开始时间戳 intervalTime:function(){ if(plugJs.stamp > 0){ var day = Ma

  • jquery 倒计时效果实现秒杀思路

    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59","#colockbox1"); }); function countDown(time,id){ var day_elem = $(id).find('.day'); var hour_elem = $(id).find('.hour'); var minute_

随机推荐