案例：倒计时

案例分析：

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'));

源码如下