大家好，欢迎来到IT知识分享网。
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切换等外界因素的影响。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/79659.html
