原生原生js实现倒计时的思路
1、用原生js实现倒计时，首先得利用 Date 获取系统提供的当前时间，其次还需要一个截止时间，这样才可以去思考下来应该怎么实现倒计时这个功能
2、既然是倒计时，肯定会用setInterval(()=>{}, 时间数) 来实现自动计时
2、利于系统的当前时间和用户提供的截止时间，我们可以知道总共还剩多少时间，再将剩下时间分别换算成天、时、分和秒，
3、当到了截止时间，利用 clearInterval(定时器名字) 结束计时，再将所有的天、时、分、秒的时间全部设置为0
关于第一步利用Date 获取系统提供的当前时间要注意的点
1、Date是系统自动生成的，是一个构造函数，所有要利用new实例化
2、new Date() 返回的是一个标准时间，比如 Date Thu Apr 02 2020 18:00:42 GMT+0800 (中国标准时间)，但这样不利于我们去计算，所以我们利用 +new Date() 去实现获取时间，这返回的一个毫秒数
关于第三步换算天、时、分和秒要完善的部分
1、当进行天、时、分、秒的换算时，换算的结果是一个String类型，所以要利于parseInt将其转化成Number类型
2、当天、时、分和秒的计算结果小于10时，需要在其前面用字符串拼接一个0，这样可以保证时间的可读性
关于第四步如何判断是否到了截止时间
由第二步可以知道小于10时，我们用了一个字符串拼接实现了补0，所以此时小于10的数，不论是天、时、分还是秒都是String类型（大于10 的是Number类型），所我判断的时候也是要利用String这个特点去判断，
效果图（视频加载可能有点慢哦~）
timeDown
下面是html 和css 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<style>
.box{
margin: 100px auto;
width: 500px;
height: 300px;
background-color:rebeccapurple;
}
.box>div{
float: left;
margin: 120px 6px ;
color: #fff;
font-size: 20px;
}
input{
width: 50px;
height: 30px;
background-color: rgba(0, 0, 0, .4);
color: #fff;
font-size: 20px;
font-weight: 700;
margin-right: 8px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<div>倒计时还剩:</div>
<div><input type="text" class="day"><span>天</span></div>
<div><input type="text" class="hour"><span>时</span></div>
<div><input type="text" class="minute"><span>分</span></div>
<div><input type="text" class="second"><span>秒</span></div>
</div>
<script>
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var timer = '2020-1-8 12:42';
window.addEventListener('load',function(){
timeDown(timer,second,minute,hour,day);
})
</script>
<script src="./function/timedown.js"></script>
</body>
</html>
下面是js代码实现
function timeDown(usertime,seconds,minutes,hours,days){
getTime();
function getTime(){
var timer = setInterval(() => {
// 获取用户输入的时间
usertime = +new Date(usertime);
// 获取当前的时间
var currentTime = +new Date();
// 获取还剩余的时间
var accountTime = (usertime - currentTime)/1000;
// 计算天
var day = parseInt(accountTime/60/60/24);
day = day < 10 ? '0' + day : day;
days.value = day;
// 计算时
var hour = parseInt(accountTime/60/60%24);
hour = hour < 10 ? '0' + hour : hour;
hours.value = hour;
// 计算分
var minute = parseInt(accountTime/60%60);
minute = minute < 10 ? '0' + minute : minute;
minutes.value = minute;
// 计算秒
var second = parseInt(accountTime%60);
second = second < 10 ? '0' + second : second;
seconds.value = second;
// '0' 是当数字 < 10 时,拼接的一个, 所以判断还需要用拼接
// 第二个0是正常的秒的计算
if(second < '0'+ 0){ // 是second,这是计算的值
seconds.value = '00';
clearInterval(timer);
minutes.value = '00';
hours.value = '00';
days.value = '00';
}
}, 1000);
}
}
