js实现倒计时

最新推荐文章于 2022-04-07 11:21:53 发布

淡若清风_Simple

最新推荐文章于 2022-04-07 11:21:53 发布

阅读量287

点赞数 2

分类专栏：工具代码文章标签： js实现倒计时

本文链接：https://blog.csdn.net/weixin_42060658/article/details/100024605

版权

工具代码专栏收录该内容

30 篇文章 0 订阅

订阅专栏

js 实现倒计时
在这里插入图片描述

// html结构
<div class="countdown clearfix">
	<span>0</span>
	<span>0</span>
	<span>:</span>
	<span>0</span>
	<span>0</span>
	<span>:</span>
 	<span>0</span>
	<span>0</span>
</div>

window.onload = function() {
	// 倒计时: 假设为4210s  即1个小时10分钟10秒
	curtdown(4210);
}
var curtdown = function(curt_times) {
	// 获取倒计时的容器
	var spans = document.querySelector(".curtdown").querySelectorAll("spans")
	// 创建一个计时器
	var timer = setInterval(function(){
	// 每隔一秒进行更新
	curt_times--;
	// 计算时分秒
	var h = Math.floor(curt_times/3600)
	var m = Math.floor(curt_times%3600/60)
	var s= curt_times%60
	// 将时分秒填入到dom元素中
	spans[0].innerhtml = Math.floor(h/10);
	spans[0].innerhtml = h%10

	spans[0].innerhtml = Math.floor(m/10);
	spans[0].innerhtml = m%10

	spans[0].innerhtml = Math.floor(s/10);
	spans[0].innerhtml = s%10
	// 当倒计时时间小于等于零 停止倒计时
	if (curt_times <= 0){
		clearInterval(timer)
	}
	},1000)
}

上述js部分代码的详解

	###关于时间周期性问题
	1. 时间以秒为单位
	2. 对与小时来说： 1h = 3600s, 即3600s为一个周期，周期数即为小时数
	3. 对于分钟来说： 1m = 60s, 即60s为一个周期，周期数为分钟数
	4. 总秒数/3600s 得到的是小时的周期数，即多少小时，记得向下取整哦
	5. 总秒数%3600s 得到的是剩下的分钟的秒数和
	6. 总秒数%3600/60 得到的是分钟的周期数，即多少分钟，，记得向下取整哦
	7. 总秒数%60 的到的是剩下的多少秒
	### 关于十进制的周期性问题（这里指的是两位数）
	1.得到十位数： number/10 --> 向下取整 Math.floor(number/10)
	2.得到个位数： number%10 --> 即取余