倒计时效果
通过js内置的日期对象Date实现
效果分析:
核心算法:
- 输入的时间减去现在的时间就是剩余的时间,即倒计时 。
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
- 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
转换公式如下:
- d = parseInt(总秒数 / 60 / 60 / 24); // 计算天数
- h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
- m = parseInt(总秒数 / 60 % 60); // 计算分数
- s = parseInt(总秒数 % 60); // 计算当前秒数
具体代码段:
function countDown(time) {
//现在时间的总的毫秒数
var nowTimes = +new Date();
//用户输入时间总的毫秒数
var inputTimes = +new Date(time);
//剩余时间的毫秒数
var times = (inputTimes - nowTimes) / 1000;
//把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
h = parseInt(times / 60 / 60 % 24)
h = h < 10 ? '0' + h : h;
m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d+'天'+h+'时'+m+'分'+s+'秒';
}
// 把函数的返回值(字符串形式)渲染到body标签内
document.body.innerHTML = countDown('2021-03-19 22:00:00')
// 定时器 每隔1秒渲染一次
setInterval(function () {
document.body.innerHTML = countDown('2021-03-19 22:00:00')
}, 1000)
实现效果:
注:在核心算法中,是不能直接拿着时分秒相减,比如 05 分减去25分,结果会出现负数的问题,正确的操作是获取总到毫秒数进行相减求差值。
欢迎阅读,希望对你有所帮助!