目录
- 前言:
- 项目效果展示:
- 代码实现思路:
- 使用方法:
- 重点功能讲解:
- 实现代码:
- 总结:
前言:
很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧!
项目效果展示:
代码实现思路:
- 获取 input 的参数,和现在时间。
- 点击开始则,input 框的时间参数减去现在时间。
- 设置定时器,每一秒执行一次。
//1000表示每隔一秒变化一次,单位为毫秒
setInterval(countDown, 1000);
- 点击清空则,清除 input 框的内容,停止定时器
- 给 input 框设置正则表达式,只能输入数字,输入其他则返回:输入错误
- 倒计时时间可以自己进行改变,改变后剩余时间自动发生变化。
使用方法:
新建一个后缀为 HTML 的文件,然后把下面的代码复制进去,然后双击打开。
当然也可以直接通过下面链接进行下载,下载完成后双击打开即可。
点击进行下载:
重点功能讲解:
时间换算公式
天=(总秒数/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 制作一个倒计时,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。