用JS实现一个简单的自定义倒计时_在国庆节倒计时显示打折促销信息代码html-优快云博客

本文链接：https://blog.youkuaiyun.com/lsxlyy/article/details/116571879

本文通过实例代码展示了如何使用JavaScript来创建一个自定义的倒计时功能，以今年国庆节为例，讲解了具体的实现步骤和代码细节，允许用户自定义倒计时的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里以今年的国庆假期为例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			margin:0 auto;
			width: 80%;
			text-align: center;
		}
		div p{
			font-size: 26px;
			font-weight: bold;
		}
		div span{
			color: red;
			font-size: 36px;
		}
	</style>
	<script type="text/javascript">
window.onload=function(){

	var id=setInterval(function(){
		var today=new Date();
		var endDay=new Date(2021,9,1);

		var num=Math.round((endDay.getTime()-today.getTime())/1000);
		var day=parseInt(num/(24*60*60));
		var hour=parseInt((num-day*24*60*60)/3600);
		var min=parseInt((num-day*24*60*60-hour*3600)/60);
		var sec=parseInt(num-day*24*60*60-hour*3600-min*60);

		var spans=document.getElementsByTagName('span');
		spans[0].innerHTML=change(day);
		spans[1].innerHTML=change(hour);
		spans[2].innerHTML=change(min);
		spans[3].innerHTML=change(sec);

		if(num<=0){
			clearInterval(id);
			Array.prototype.slice.call(spans).forEach(function(item){
				item.innerHTML='00';
				document.getElementsByTagName('h2')[0].innerHTML='倒计时已经结束！';
			});
		}
	},1000);

	function change(num){
		if(num<10){
			return "0"+num
		}else{
			return num+''
		}
	}
}
	</script>
</head>
<body>
	<div>
		<p>距离2021年十月一假期还剩：</p>
		<span>0</span>天
		<span>0</span>小时
		<span>0</span>分钟
		<span>0</span>秒
	</div>
	<h2></h2>
</body>
</html>