在做购物网站时我们时常会用到倒计时来计算活动结束的时间,今天就和大家分享一下倒计时的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="count-time">
<span class="tis1"></span>
<span class="tis2">天</span>
<span class="tis3"></span>
<span class="tis4">时</span>
<span class="tis5"></span>
<span class="tis6">分</span>
<span class="tis7"></span>
<span class="tis8">秒</span>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
window.setInterval(function () {
$(".count-time").countDown('2019/07/10 24:00:00');
}, 1000);
; (function ($) {
$.fn.extend({
countDown: function (endTime) {
//取设定的活动结束时间距1970年1月1日之间的毫秒数
var end = new Date(endTime).getTime();
//取当前时间距1970年1月1日之间的毫秒数
var nowTime = new Date().getTime();
//结束时间与当前时间之间的毫秒差
var difference = end - nowTime;
if (difference > 0) {
//将毫秒差换算成天数
days = Math.floor(difference / 86400000);
difference = difference - days * 86400000;
//换算成小时
hours = Math.floor(difference / 3600000);
difference = difference - hours * 3600000;
//换算成分钟
minutes = Math.floor(difference / 60000);
difference = difference - minutes * 60000;
//换算成秒数
seconds = Math.floor(difference / 1000);
//不足10时,进行补零操作
if (hours < 10) {
hours = "0" + hours;
};
if (minutes < 10) {
minutes = "0" + minutes;
};
if (seconds < 10) {
seconds = "0" + seconds;
};
$(".tis1").html(days);
$(".tis3").html(hours);
$(".tis5").html(minutes);
$(".tis7").html(seconds);
} else {
//设定若是过了设置的活动结束时间,全部写成0天0时0分0秒
$(".tis1").html(0);
$(".tis3").html(0);
$(".tis5").html(0);
$(".tis7").html(0);
}
}
})
})(jQuery);
</script>
</body>
</html>