js案例:倒计时

m0_63400611

已于 2022-05-18 16:03:11 修改

阅读量123

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2021-12-31 18:36:49 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/122260926

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

分析

这个倒计时是不断变化的,需要定时器来自动变化(setnterval)
三个黑色盒子里面的分别存放时分秒
三个黑色盒子利用innerHTML放入计算的小时分钟秒数
第一次执行也是间隔毫秒数,因此刷新页面会有空白
采用封装函数的方式,可以先调用一次函数,防止刷新页面的空白问题

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		.box {
			position: relative;
			border-radius: 5px;
			margin: 200px auto;
			background-color: red;
			width: 250px;
			height: 300px;
		}
		.hour,
		.minute,
		.second {
			border-radius: 5px;
			margin-left: 5px;
			background-color: black;
			color: white;
			padding: 10px;
		}
		.sbox {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-left: auto;
			margin-right: auto;
			width: 60%;
		}
	</style>
</head>

<body>
	
	<div class="box">
		<div class="sbox">
			<span class="hour"></span>
			<span class="minute"></span>
			<span class="second"></span>
		</div>
	</div>
	
<script>

	//获取元素
	var hour = document.querySelector('.hour');
	var minute = document.querySelector('.minute');
	var second = document.querySelector('.second');
	var inputTime = +new Date('2022-6-30 00:00:00');//返回的是用户输入时间总的毫秒数
	countDown();//开启定时器,在刷新时定时器方块不会有空白
	
	//开启定时器
	setInterval(countDown, 1000);
	function countDown() {
		var nowTime = +new Date();//返回的是当前时间总的毫秒数
		var times = (inputTime - nowTime) / 1000;//times是剩余时间总是秒数
		var d = parseInt(times / 60 / 60 / 24);//.天
		d = d < 10 ? '0' + d : d;
		var h = parseInt(times / 60 / 60 % 24);//时
		h = h < 10 ? '0' + h : h;
		hour.innerHTML = h;//把剩余的小时给小时盒子
		var m = parseInt(times / 60 % 60);//分
		m = m < 10 ? '0' + m : m;
		minute.innerHTML = m;
		var s = parseInt(times % 60);//当前的秒
		s = s < 10 ? '0' + s : s;
		second.innerHTML = s;
	}
	
</script>
	
</body>
</html>