前言：
很多网站在做活动时，会出现一个截止时间倒计时的提示，跟随此文做一个倒计时吧！
项目效果展示：
代码实现思路：
- 获取 input 的参数，和现在时间。
- 点击开始则，input 框的时间参数减去现在时间。
- 设置定时器，每一秒执行一次。
//1000表示每隔一秒变化一次，单位为毫秒
setInterval(countDown, 1000);
- 点击清空则，清除 input 框的内容，停止定时器
- 给 input 框设置正则表达式，只能输入数字，输入其他则返回：输入错误
- 倒计时时间可以自己进行改变，改变后剩余时间自动发生变化。
使用方法：
新建一个后缀为 HTML 的文件，然后把下面的代码复制进去，然后双击打开。
当然也可以直接通过下面链接进行下载，下载完成后双击打开即可。
点击进行下载：https://download.csdn.net/download/weixin_62897746/87425011
重点功能讲解：
时间换算公式
天=（总秒数/60/60/24）;
时=（总秒数/60/60%24）;
分=（总秒数/60%60）;
秒=（总秒数%60）;
创建日期对象
var dat=new Date();
日期对象被创建以后，会获得本地（电脑上的时间）系统时间
间歇调用
setInterval(函数,时间(毫秒数))
举例:
setInterval(function(){
alert(1)
},1000)
取消间歇调用：
clearInterval()
正则表达式：
年：
/^[1-9]{1}[0-9]{3}$/;
必须是数字，开头不能是 0，长度是 4
月，日：
/^[1-9]{1}[0-9]{0,1}$/;
必须是数字，开头不能是 0，长度是 2
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:700px;
height:300px;
border:5px solid blue;
margin:0 auto;
position:relative;
}
.one{
width:695px;
height:60px;
border:1px solid blue;
display:inline-block;
text-align:center;
line-height:60px;
margin:2px;
}
.two{
width:228px;
height:60px;
border:1px solid blue;
display:inline-block;
}
input{
margin:20px 10px;
}
.three{
width:695px;
height:60px;
border:1px solid blue;
display:inline-block;
text-align:center;
margin:2px;
}
.three>input{
width:100px;
height:15px;
}
.li{
width:70px;
height:30px;
/*background:red;*/
position:absolute;
left:300px;
bottom:0;
}
</style>
</head>
<body>
<div class="box">
<span class="one">
<input type="text" name="" id="" value="如：距离中秋还有" />
</span>
<span class="two">
<input type="text" name="" id="" value="2023" />年<span class="li"></span>
</span>
<span class="two">
<input type="text" name="" id="" value="9" />月<span class="li"></span>
</span>
<span class="two">
<input type="text" name="" id="" value="29" />日<span class="li"></span>
</span>
<span class="three">
<input type="text" name="" id="" value="" />天
<input type="text" name="" id="" value="" />时
<input type="text" name="" id="" value="" />分
<input type="text" name="" id="" value="" />秒
</span>
<span class="one">
<button>开始</button>
<button>清空</button>
</span>
</div>
</body>
<script type="text/javascript">
var oinp=document.querySelectorAll('input');
var obtn=document.querySelectorAll('button');
var osp=document.querySelectorAll('.li');
obtn[0].onclick=function(){
l=setInterval(function(){
var dat=new Date(oinp[1].value,oinp[2].value-1,oinp[3].value);
var dat1=new Date();
var a=dat.getTime();
var b=dat1.getTime();
var c=a-b;
var d=parseInt(c/1000);
var e=parseInt(d/60);
var f=parseInt(e/60);
var g=parseInt(f/24);
var h=f-g*24;
var i=e-f*60;
var j=d-e*60;
oinp[4].value=g;
oinp[5].value=h;
oinp[6].value=i;
oinp[7].value=j;
},1000)
osp[0].innerHTML='';
}
obtn[1].onclick=function(){
for(var k=1; k<oinp.length; k++){
oinp[k].value='';
}
osp[0].innerHTML='';
clearInterval(l)
}
var one=/^[1-9]{1}[0-9]{3}$/;
oinp[1].onblur=function(){
if(one.test(oinp[1].value)&&oinp[1].value>1969){
osp[0].innerHTML=''
}else{
osp[0].innerHTML='输入错误'
osp[0].style.color='red';
}
}
var two=/^[1-9]{1}[0-9]{0,1}$/;
oinp[2].onblur=function(){
if(two.test(oinp[2].value)&&oinp[2].value<13){
osp[0].innerHTML=''
}else{
osp[0].innerHTML='输入错误'
osp[0].style.color='red';
}
}
var three=/^[1-9]{1}[0-9]{0,1}$/;
oinp[3].onblur=function(){
if(three.test(oinp[3].value)&&oinp[3].value<32){
osp[0].innerHTML=''
}else{
osp[0].innerHTML='输入错误'
osp[0].style.color='red';
}
}
if(oinp[3].value>0&&oinp[3].value<32){
osp[0].innerHTML='';
}
</script>
</html>
总结：
以上就是 基于 js 制作一个倒计时，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog