场景:给一个终点的时间戳。比如明天或者后天12:00:00 为终点时间。然后倒计时,不管页面刷新与否倒计时不误差!
实现原理:计算当前的时间戳,用终点时间戳减去当前时间戳。(结果可能是毫秒,如果是毫秒请转化为秒)计算的结果为妙,将秒转化为时间,实现倒计时。
<div class="container-fluid main">
<h5>倒计时功能</h5>
<hr>
<a href="" class="btn btn-info timer"></a>
</div>
<script src="/js/jquery.slim.min.js" ></script>
<script type="text/javascript">
function countdown() {//倒计时
end_time=1508227190; //终止时间
var curr_time = parseInt(Date.parse(new Date())/1000);
var diff_time=parseInt(end_time-curr_time);// 倒计时时间差
var h = Math.floor(diff_time / 3600);
var m = Math.floor((diff_time / 60 % 60));
var s = Math.floor((diff_time % 60));
$('.timer').html(h + "时" + m + "分" + s + "秒");
if (diff_time<=0) {
$('.timer').html(0 + "时" + 0 + "分" + 0 + "秒");
};
}
countdown();
var start_time=setInterval('countdown()',1000);
</script>
测试结果:
为0秒的时候自动清除计时,并且为0时0分0秒。开始的时候没有暂停1秒迹象。