js 弄一个倒计时

清风与我

2024-04-29 帮助1人

前言：

很多网站在做活动时，会出现一个截止时间倒计时的提示，跟随此文做一个倒计时吧！

学新通

项目效果展示：

学新通

代码实现思路：

获取 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>

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

这篇好文章是转载于：学新通技术网

js 弄一个倒计时

前言：

项目效果展示：

代码实现思路：

使用方法：

重点功能讲解：

实现代码：

总结：

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开