原理:
用时间戳来做倒计时,因为时间戳是不会重复的,而时间直接减会出现负值, 相减后将时间戳在转换为时分秒,1秒=1000毫秒
思路:1、先获取当前时间和用户输入时间的时间戳
2、相减,得到剩余时间的毫秒数
3、将其转换为时分秒
效果:
CSS:
div {
float: left;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #000;
font-size: 20px;
color: white;
margin: 5px;
}
HTML:
<div class='day'></div>
<div class='hour'></div>
<div class='minute'></div>
<div class='second'></div>
JS:
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
//开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();//获取当前时间的毫秒数
var inputTime = +new Date('2021-11-11 00:00:00');
//获取用户输入时间的毫秒数
var times = (inputTime - nowTime) / 1000;//获取属于时间的秒数
// 转换为具体的时分秒
var d = parseInt(times / 60 / 60 / 24);//这个会自动取整就不用再取模了
d = d < 10 ? '0' + d : d;
day.innerHTML = d;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}