当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery 实现倒计时天,时,分,秒功能

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

2018年08月08日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网