jQuery如何实现倒计时功能

  • 更新时间:2020-02-22 10:13:21
  • 编辑:程令慧

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实现加载等待效果示例

    加载等待效果想必大家都有见到过吧,其实很简单,在本文将为大家介绍下使用jquery是如何实现的,感兴趣的朋友可以参考下

    发布时间:2019-08-28

  • Jquery把获取到的input值转换成json

    本篇文章主要介绍了Jquery把获取到的input值转换成json的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧

    发布时间:2019-07-25

  • 第三方JavaScript编程

    第三方JavaScript编程

    第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS

    大小:74.2 MBJavaScript电子书

  • JavaScript之美

    JavaScript之美

    阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

    大小:94 MBJavaScript电子书

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

    大小:38.6 MBJavaScript电子书

  • HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

    大小:65.2 MB网页制作电子书

  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

    大小:59150 MB MJS实例

  • JavaScript启示录

    JavaScript启示录

    《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

    大小:24.4 MBJS电子书

  • 精通JavaScript

    精通JavaScript

    精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

    大小:33.5 MBJavaScript电子书

用户留言