前言：

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

项目效果展示：

代码实现思路：

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

总结：

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

以上就是基于 js 制作一个倒计时，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

基于 js 制作一个倒计时相关推荐

使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
用MFC制作一个倒计时小程序
用MFC制作一个倒计时小程序 1.思路: 1)初始步骤1:新建一个工程,选择MFC AppWizard(exe),工程名命名为CdTimer,选择基于对话框形式的应用程序,将此主对话框用于显示剩余的时 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
用JS制作一个信息管理平台完整版
前言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（4）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
jsp循环输出表格_使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...

基于 js 制作一个倒计时

目录

前言：