（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

最新推荐文章于 2022-08-14 16:50:57 发布

雷斯巴能

最新推荐文章于 2022-08-14 16:50:57 发布

阅读量724

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript - Jquery 文章标签：时间倒计时 JS倒计时分秒毫秒倒计时

本文链接：https://blog.csdn.net/China_Guanq/article/details/79205821

JavaScript - Jquery 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现一个具有分、秒、毫秒显示的倒计时功能，并提供了完整的HTML结构、CSS样式及JS代码实现。

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

这里写图片描述

（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

第一步：构建HTML 结构和样式

<!-- 构建 HTML -->
<div class="timing">
	<span class="minute date">07</span>
	<span class="colon">:</span>
	<span class="second date">16</span>
	<span class="colon">:</span>
	<span class="millisecond date">87</span>
</div>

<!--编写CSS 美颜效果-->
.timing{
    color: #ed4123;
    font-size: 20px;
    font-weight: 600;
    font-family: sans-serif;
    display: flex;
}
.timing > span{
	display: block;
	float: left;
}
.date{
	width: 35px;
  		text-align: center;	
}

第二步：JS setInterval 间断执行操作DOM

/**
 * 操作页面 倒计时模块的 时间节点
 * @param {Object} minute 分
 * @param {Object} second 秒
 * @param {Object} millisecond 毫秒
 */
function timingInterVal(minute,second,millisecond) {
	var timing = setInterval(function() {
		//设置毫秒数
		if((Number(millisecond.innerHTML)) <= 0 ) {
			//设置秒数
			if((Number(second.innerHTML)) <= 0) {
				//设置分数
				if((Number(minute.innerHTML)) <= 0) {
					//分钟倒计时结束
					clearInterval(timing);
					//结束 具体操作
					return false;
				}else {
					(Number(minute.innerHTML)) <= 10 ? minute.innerHTML = ('0' + ((Number(minute.innerHTML)) - 1)) : minute.innerHTML = ((Number(minute.innerHTML)) - 1);
				}
				second.innerHTML = '60';
			}else {
				(Number(second.innerHTML)) <= 10 ? second.innerHTML = ('0' + ((Number(second.innerHTML)) - 1)) : second.innerHTML = ((Number(second.innerHTML)) - 1);
			}
			millisecond.innerHTML = '99';
		}else {
			(Number(millisecond.innerHTML)) <= 10 ? millisecond.innerHTML = ('0' + (Number(millisecond.innerHTML) - 1)) : millisecond.innerHTML = (Number(millisecond.innerHTML) - 1);
		}
	},9);
}

//遍历页面中定义的 存在的倒计时 HTML 模块。
var timing = document.getElementsByClassName('timing');
for(var i = 0;i<timing.length;i++) {
	//分
	var minute = timing[i].querySelector('.minute');
	//秒
	var second = timing[i].querySelector('.second');
	//毫秒
	var millisecond = timing[i].querySelector('.millisecond');
	
	timingInterVal(minute,second,millisecond);
}