javascript 时间倒计时

2022-10-04 21:56:50

新加入一个项目的集中开发，遇到一个需要倒计时的需求，经过测试，有以下几种方案，分享出来：

方案一：

页面Html：

JavaScript代码：

<span style="font-size:18px;"><script>
var timeCounter = (function () {
var int;
var timeID = SumTime().split(":");
var total =parseInt(timeID[0] * 3600) + parseInt(timeID[1] * 60) + parseInt(timeID[2]);//将时间换算成秒数
return function (elemID) {
obj = document.getElementById(elemID);
var s = (total % 60) < 10 ? ('0' + total % 60) : total % 60;//秒
var h = total / 3600 < 10 ? ('0' + parseInt(total / 3600)) : parseInt(total / 3600);//时
var m = (total - h * 3600) / 60 < 10 ? ('0' + parseInt((total - h * 3600) / 60)) : parseInt((total - h * 3600) / 60);//分
obj.innerHTML = h + ' : ' + m + ' : ' + s;
total--;
int = setTimeout("timeCounter('" + elemID + "')", 1000);
if (total < 0) clearTimeout(int);
}
})()
function SumTime() {
var ap = new Date().toLocaleTimeString().substring(0, 2);
var startTime = new Date().toLocaleTimeString().substring(2);
var endTime = "15:00:00";
var start = new Array;
var end = new Array;
start = startTime.split(":");
end = endTime.split(":");
var hh = end[0] - start[0];
if (ap == "下午" || ap=="PM") { hh -= 12;}
if (end[1] < start[1]) {
hh -= 1;
var mm = end[1] + 60 - start[1];
} else {
var mm = end[1] - start[1];
}
if (end[2] < start[2]) {
mm -= 1;
var ss = end[2] + 60 - start[2];
} else {
var ss = end[2] - start[2];
}
var diffTime = hh + ":" + mm + ":" + ss;
return diffTime;
}
</script></span>

方案二：

js：

方案三：

<span style="font-size:18px;"><script>
var second = 7200; // 剩余秒数
// 写一个方法，将秒数专为天数
var toDays = function(){
var s = second % 60; // 秒
var mi = (second - s) / 60 % 60; // 分钟
var h = ((second - s) / 60 - mi ) / 60 % 24; // 小时
var d = (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天
return d + "天" + h + "小时" + mi + "分钟" + s + "秒";
}
//定时器
window.setInterval(function(){
second --;
document.getElementById("showTimes").innerHTML = toDays ();
}, 1000);
</script>
<p id="<span margin: 0px; padding: 0px; border: currentColor; color: black; background-color: inherit;">font-family: Arial, Helvetica, sans-serif;">timeCounter</span>"></p></span>

总结：

总结一下上面的集中方法，其实就是一种方法：将时间差转化为以秒为单位的数，然后写定时器美妙执行一次时间变化，只是这个变化的方式稍有不同，但是都离不开SetTimeout延时这个方法,另一个就是window的setInterval设置时间间隔，思想是一样的。

码农公寓