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


Posted in jQuery onJune 01, 2020

本文实例讲述了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>3water.com 时间倒计时</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>

运行结果:

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

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
JQuery获得内容和属性方法解析
May 30 #jQuery
jQuery实现视频展示效果
May 30 #jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
You might like
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
jQuery提交多个表单的小例子
2013/06/30 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
js实现简易ATM功能
2020/10/27 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
python条件和循环的使用方法
2013/11/01 Python
python基础教程之序列详解
2014/08/29 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python Subprocess模块原理及实例
2019/08/26 Python
使用python实现名片管理系统
2020/06/18 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
创意广告词
2014/03/17 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android