Table of contents
Foreword:
When many websites are doing activities, there will be a countdown reminder of the deadline, follow this article to do a countdown!
Project effect display:
Code implementation idea:
- Get the input parameters and the current time.
- When you click Start, the time parameter in the input box is subtracted from the current time.
- Set a timer to execute every second.
//1000表示每隔一秒变化一次，单位为毫秒
setInterval(countDown, 1000);
- Click Clear to clear the contents of the input box and stop the timer
- Set a regular expression for the input box, only numbers can be entered, and other input will return: input error
- The countdown time can be changed by itself, and the remaining time will change automatically after the change.
Instructions:
Create a new file with the suffix HTML, copy the following code into it, and double-click to open it.
Of course, you can also download directly through the link below. After the download is complete, double-click to open it.
Click to download: https://download.csdn.net/download/weixin_62897746/87425011
Key function explanation:
Time conversion formula
days = (total seconds/60/60/24);
hours = (total seconds/60/60%24);
minutes = (total seconds/60%60);
seconds = (total seconds% 60);
Create a date object
var dat=new Date();
After the date object is created, the local (time on the computer) system time will be obtained
Call setInterval(function, time(milliseconds)) intermittently
Example:
setInterval(function(){
alert(1)
},1000)
Cancel intermittent calls:
clearInterval()
Regular expression:
year:
/^[1-9]{1}[0-9]{3}$/;
Must be a number, cannot start with 0, and has a length of 4
time:
/^[1-9]{1}[0-9]{0,1}$/;
Must be a number, cannot start with 0, and has a length of 2
Implementation code:
<!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>
Summarize:
That's allMake a countdown timer based on jsIf you don’t understand, you can ask me in the comment area or chat with me privately. I will continue to release some new functions in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog