js 弄一个倒计时
前言:
很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧!
项目效果展示:
代码实现思路:
- 获取 input 的参数,和现在时间。
- 点击开始则,input 框的时间参数减去现在时间。
- 设置定时器,每一秒执行一次。
//1000表示每隔一秒变化一次,单位为毫秒
setInterval(countDown, 1000);
- 点击清空则,清除 input 框的内容,停止定时器
- 给 input 框设置正则表达式,只能输入数字,输入其他则返回:输入错误
- 倒计时时间可以自己进行改变,改变后剩余时间自动发生变化。
使用方法:
新建一个后缀为 HTML 的文件,然后把下面的代码复制进去,然后双击打开。
当然也可以直接通过下面链接进行下载,下载完成后双击打开即可。
点击进行下载:https://download.csdn.net/download/weixin_62897746/87425011
重点功能讲解:
时间换算公式
天=(总秒数/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>
总结:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghehjj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13