HTML与JS实现倒计时定时器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34609519/article/details/107447160

本文介绍如何使用HTML和JavaScript在网页上创建一个简单的倒计时定时器，展示实时更新的剩余时间。

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

简单实现定时器

 <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
		<!-- CDN的全称是Content Delivery Network，即内容分发网络。 -->
		<!-- CDN加速简单的来说，就是把原服务器上数据复制到其他服务器上，用户访问时，哪台服务器近访问到的就是哪台服务器上的数据。 -->
		<!-- 在页面头部或底部body前引入你想要的cdn节点的js文件既可 -->
		<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

	</head>
	<body>
		<button class="jiange_btn">停止间隔定时器</button>
		<button class="yanshi_btn">停止延时定时器</button>

	</body>
	<script type="text/javascript">

		//间隔定时器,每隔一秒输出时间
		var time1 = setInterval(function(){
			console.log(new Date());
		},1000)
		var jiange_btn = document.getElementsByClassName('jiange_btn')[0];
		jiange_btn.onclick = function(){
			clearInterval(time1);
		}
		// 延时定时器
		var time2 = setTimeout(function(){
			console.log('炸弹爆发');
			console.log(new Date());
		},10000)
		var yanshi_btn = document.getElementsByClassName('yanshi_btn')[0];
		yanshi_btn.onclick = function(){
			clearInterval(time2);
		}
		
	</script>
</html>

网页上常见的倒计时显示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
		<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

	</head>
	<body>
	</body>
	<script type="text/javascript">
		// 补零操作，当显示为3s秒，显示的是03
		function pluszero(number){
			if(number<10){
				number = '0'+number;
				
			} 
			return number;
		} 
		
		function daojishi(){
			// 18点的时间戳，当前时间的时间戳
			var time1 = new Date('2020-7-19 18:00:00').getTime();
			var time2 = new Date().getTime();

			// 计算还需要的时间
			var cha = time1-time2;
			// 小时
			var lasthours = Math.floor(cha/(1000*60*60));
			// 分钟
			var lastminutes = Math.floor(cha/(1000*60)%60);
			// 秒
			var lastseconds =Math.floor(cha/1000%60%60);
			lasthours = pluszero(lasthours);
			lastminutes = pluszero(lastminutes);
			lastseconds = pluszero(lastseconds);
			console.log(lasthours+':'+lastminutes+':'+lastseconds);
		}
		daojishi();
		var time = setInterval(daojishi,1000);
	</script>
</html>

HTML+JS定时器