当前位置:主页 > javascript教程 > jQuery 实现倒计时天,时,分,秒功能

jQuery如何实现倒计时功能

发布:2020-02-22 10:13:21 92


给大家整理了JavaScript相关的编程文章,网友乌新蕾根据主题投稿了本篇教程内容,涉及到jquery、倒计时、jQuery 实现倒计时天,时,分,秒功能相关内容,已被900网友关注,相关难点技巧可以阅读下方的电子资料。

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://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.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误解决方案

    发布:2020-02-21

    今天测试偶然发现jquery.bgiframe.js在IE9环境下提示错误,于是很是好奇,想办法知道究竟,于是搜索了一下,现在与大家分享希望可以帮助你们


  • JS实现针对给定时间的倒计时功能示例

    JS实现针对给定时间的倒计时功能示例

    发布:2022-06-15

    给网友们整理关于javascript的教程,这篇文章主要介绍了JS实现针对给定时间的倒计时功能,结合具体实例形式分析了javascript日期时间的正则判定与动态运算相关操作技巧,需要的朋友可以参考下


  • jquery用法技巧总结

    发布:2020-01-18

    本文给大家汇总介绍了一下Jquery使用小技巧,算是比较全面了,一共26个小店,非常细致,需要的朋友可以参考下


  • jquery实现在光标位置插入内容的方法

    发布:2022-04-05

    这篇文章主要介绍了jquery实现在光标位置插入内容的方法,涉及jQuery功能的扩展技巧,具有一定参考借鉴价值,需要的朋友可以参考下


  • jQuery链式调用与show的知识点分析

    发布:2020-01-15

    这篇文章主要介绍了jQuery的XX如何实现?——2.show与链式调用 的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧


  • jquery实现导航菜单伸缩效果

    发布:2020-02-21

    这篇文章主要介绍了jquery实现点击向下展开菜单项(伸缩导航)效果,通过jquery遍历及匹配页面元素并动态修改页面元素样式实现该功能,需要的朋友可以参考下


  • 为jquery的ajax请求添加超时timeout时间的操作方法实例详解

    发布:2020-01-22

    这篇文章主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法,文中通过一段简单的代码给大家介绍jquery ajax超时设置方法,感兴趣的朋友跟随脚本之家小编一起看看吧


  • jQuery Ajax File Upload使用实例解析

    发布:2020-01-19

    这篇文章主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


网友讨论