TimeDown.js
/*
时间倒计时插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
//结束时间
var endDate = new Date(endDateStr);
//当前时间
var nowDate = new Date();
//相差的总秒数
var totalSeconds = parseInt((endDate - nowDate) / 1000);
//天数
var days = Math.floor(totalSeconds / (60 * 60 * 24));
//取模（余数）
var modulo = totalSeconds % (60 * 60 * 24);
//小时数
var hours = Math.floor(modulo / (60 * 60));
modulo = modulo % (60 * 60);
//分钟
var minutes = Math.floor(modulo / 60);
//秒
var seconds = modulo % 60;
//输出到页面
document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
//延迟一秒执行自己
setTimeout(function () {
TimeDown(id, endDateStr);
}, 1000)
}html
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时间倒计时</title>
<script src="TimeDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="show">
</div>
<script type="text/javascript">
TimeDown("show", "2024-03-9 8:00:45");
</script>
</form>
</body>
</html>显示效果：
还剩:2天19小时29分钟5秒
关于setTimeout与setInterval的区别:
setTimeout只会执行一次, 在执行完成后, 重新启动新的Timeout, 时间runtime计算设置为差时, 减少出现间隔越来越大的情况; 而setInterval()会导致间隔越来越大的情况, 而出现执行时间不准确的问题:
1 Javascript会把执行的回调函数、浏览器的触发事件、UI渲染事件，先放到队列中, 队列根据先进先出的规则, 依次执行他们, 当执行到队列中的setInterval时很难保证其与setTimeout同步关系还保持。
2 setInterval无视代码错误：代码报错, 但是setInterval依旧会按时执行, 不会中断。
3 setInterval无视网络延迟：如果调用ajax或其他服务, 他不会管是否返回回调, 会继续按时执行。
4 setInterval不保证执行：因为setInterval会定时执行, 如果函数逻辑很长, 间隔时间内执行不完, 后续方法会被抛弃。
5 setInterval会受浏览器状态影响、最小化、最大化、tab切换等外界因素的影响。