《JavaScript》BOM页面倒计时效果

最新推荐文章于 2025-05-12 22:41:49 发布

glglgl1

最新推荐文章于 2025-05-12 22:41:49 发布

阅读量1k

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/glglgl1/article/details/123883426

版权

本文通过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 = parseIn