欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-16 11:43:10
1.html部分 1357&l...

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实现倒计时天,时,分,秒,希望对大家有所帮助