JavaScript倒计时怎么写？

例：倒计时

案例分析：

1.这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)

2.三个黑色盒子里面分别存放时分秒

3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数

4.第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

5.最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。

倒计时的算法：

1.核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相减,比如05分减去25分,

结果会是负数的

2.用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数.

3.把剩余时间总的毫秒数转换为天、时、分、秒、（时间戳转换为时分秒）*/

//转换公式如下：

/*d=parseInt(总秒数/60/60/24); //计算天数

h=parseInt(总秒数/60/60%24); //计算小时

m=parseInt(总秒数/60%24); //计算分钟

s=parseInt(总秒数%60); //计算当前秒数*/

function conus(time){

var dqtime=+new Date(time);

var zqtime=+new Date();

var times=(dqtime - zqtime) / 1000;

var t=parseInt(times / 60 / 60 / 24);//天

t=t < 10 ? '0' + t:t;

var s=parseInt(times / 60 / 60 % 24);//时

s=s < 10 ? '0' + s:s;

var f=parseInt(times / 60 % 60);//分

f=f < 10 ? '0' + f:f;

var m=parseInt(times % 60);//秒

m=m < 10 ? '0' + m:m;

return t + '天' + s + '时' + f + '分' + m + '秒';

}

console.log(conus('2022-6-7 12:00:00'));

源码如下

imeDown.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切换等外界因素的影响。

然间想做一个倒计时的例子。
用到的方法是setInterval（）。
更多文章请关注我的头条号，落笔承冰

一、先了解一下setInterval，AAAAA是执行函数，BBBBB是执行周期。

二、创建一个盒子，在脚本中取得元素对象。

三、开始用setinterval方法了。

F12打开控制台，你可以看到，每秒一个log的刷新。

四、创建一个变量t，用来倒计时用。

确实可以倒计时了，但它会倒数到负数，无穷尽倒数。

五、加个判断，让它只倒数十秒。

在线咨询

上一篇：WEB前端开发工程师必备实用的50个CSS技巧
下一篇：2022可视化网页生成工具盘点

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript倒计时怎么写？

您的项目需求