《JavaScript》BOM页面倒计时效果

最新推荐文章于 2025-08-09 20:51:19 发布

原创

最新推荐文章于 2025-08-09 20:51:19 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

本文通过JavaScript展示了如何获取页面元素并创建倒计时效果。代码中使用了querySelector选择器获取小时、分钟和秒数的元素，并设置了一个定时器每隔1秒更新倒计时显示。倒计时时间设定为2022年4月1日18:00:00，只需更改inputTime变量即可调整倒计时目标时间。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div
		{
			width: 10px;
			height: 10px;
			color: #00FFFF;
			text-align: center;
			line-height: 40px;
		}
		
		
		
		
		</style>
	</head>
	<body>
		<div>
			<span class="hour">1</span>
			<span class="minute">2</span>
			<span class="second">3</span>
		</div>
		<script>
		var hour = document.querySelector('.hour');
		var minute = document.querySelector('.minute');
		var second = document.querySelector('.second');
		var  inputTime = +new Date('2022-4-1 18:00:00');
		conutDown();
		
		setInterval(conutDown,1000);
		function conutDown()
		{
			var  nowTime = +new Date();
		
			var  times = (inputTime - nowTime) / 1000;
			var h = parseInt(times / 60 / 60 % 24);
			h = h < 10 ? '0' + h : h;
			hour.innerHTML = h;
			var m = parseInt(times / 60 % 60)