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


Posted in jQuery onJuly 31, 2018

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://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 var setTimer = null;
 var chazhi = 0;
 //差值计算
 //例子(模拟)
 chazhi = 135 * 86400000;
 //真实时间(注意月份需减掉1,否则时间会计算错误)
 //chazhi = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
 //chazhi = (new Date(2018,8-1,6,6,6,6)) - (new Date());
 
 //执行函数部分
 countFunc(chazhi);
 setTimer = setInterval(function() {
 chazhi = chazhi - 1000;
 countFunc(chazhi);
 }, 1000);
 function countFunc(leftTime) {
 if(leftTime >= 0) {
  var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数 
  var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时 
  var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟 
  var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数 
  days = checkTime(days);
  hours = checkTime(hours);
  minutes = checkTime(minutes);
  seconds = checkTime(seconds);
  $(".joind").html(days);
  $(".joinh").html(hours);
  $(".joinm").html(minutes);
  $(".joins").html(seconds);
 } else {
  clearInterval(setTimer);
  $(".joind").html("00");
  $(".joinh").html("00");
  $(".joinm").html("00");
  $(".joins").html("00");
 }
 }
 function checkTime(i) { //将0-9的数字前面加上0,例1变为01 
 if(i < 10) {
  i = "0" + i;
 }
 return i;
 }
</script>

3.说明

如果变为真实时间月份需要减1,否则时间差计算会有错误

总结

以上所述是小编给大家介绍的jQuery实现倒计时天,时,分,秒,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
You might like
php长字符串定义方法
2012/07/12 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
JavaScript实现全选取消效果
2017/12/14 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
单利模式及python实现方式详解
2018/03/20 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python浪漫表白源码
2019/04/05 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
深入了解NumPy 高级索引
2020/07/24 Python
Python pip使用超时问题解决方案
2020/08/03 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
优秀生推荐信范文
2013/11/28 职场文书
关于毕业的广播稿
2014/01/10 职场文书
企业军训感想
2014/02/07 职场文书
志愿者活动总结范文
2014/04/26 职场文书
质量月口号
2014/06/20 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
德劲DE1105机评
2022/04/05 无线电