最近在做一个活动页，根据后台返回的活动开始时间、结束时间判断当前活动的状态以及实现倒计时

效果，上一篇文章有记录ios倒计时踩坑，这里记录下倒计时效果实现。

倒计时效果

js:

/**获取现在的时间*/

var nowTime = new Date().getTime();

/**活动开始时间*/

var startT = '2020-05-20 10:00:00'.replace(/-/g, "/");

var startTime = new Date(startT).getTime();

/**活动结束时间*/

var endT = '2020-05-22 10:00:00'.replace(/-/g, "/");

var endTime = new Date(endT).getTime();

var timeDiff;

var remark = "距离活动";

if (startTime >= nowTime) {

/**活动未开始*/

timeDiff = (startTime - nowTime) / 1000;

remark += "开始";

} else if (startTime < nowTime && nowTime <= endTime) {

/**活动已开始未结束*/

timeDiff = (endTime - nowTime) / 1000;

remark += "结束";

} else if (nowTime > endTime) {

/**活动已结束*/

remark = "活动已结束";

}

if (timeDiff > 0) {

setUpTimer(timeDiff);

}

/**定时器*/

var t;

function setUpTimer(time) {

t = setInterval(function () {

time--

formatSeconds(time)

if (time <= 0) {

clearInterval(t)

}

}, 1000)

}

/**小于10的数字前加0*/

function formatBit(val) {

/*转变为数字类型*/

val = +val

return val > 9 ? "" + val + "" : "0" + val + ""

}

/**根据时差计算剩余时分秒*/

function formatSeconds(time) {

if (time < 0) {

time = 0;

}

var min = Math.floor(time % 3600)

var val = formatBit(Math.floor(time / 3600)) + ':' + formatBit(Math.floor(min / 60)) + ':' + formatBit(Math.floor(time % 60))

document.getElementsByClassName("clock-s")[0].innerHTML = remark + val;

}

html:

倒计时开始

* {

padding: 0;

margin: 0;

}

.clock-s {

margin: 50px;

text-align: center

}

.clock-s span {

padding: 10px 5px;

margin-left: 5px;

background-color: #dcdcdc;

border-radius: 4px;

}