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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery插件实现搜索历史
Apr 24 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
PHP分页显示制作详细讲解
2006/10/09 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Django Highcharts制作图表
2016/08/27 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
理解python中生成器用法
2017/12/20 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
利用Python实现kNN算法的代码
2019/08/16 Python
安装python及pycharm的教程图解
2019/10/10 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
如何在python中实现线性回归
2020/08/10 Python
大学生标准推荐信范文
2013/11/25 职场文书
小学生演讲稿
2014/01/12 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
使用scrapy实现增量式爬取方式
2022/06/21 Python