2020-10-25 JavaScript—BOM—setInterval实现倒计时

setInterval实现倒计时

---

效果

在HTML中确定倒计时的初始值，中心部分进行倒计时，下方可获得当前时间，点击相应的倒计时框，弹出会话框，可获得当前倒计时的值，可进行修改，返回修改后的值，接着倒计时，效果如下图

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、html

分为三部分，标题、倒计时、底部当前时间
CSS本文章省略，可按照个人喜好设计样式

<!--header-->
	<h1>Coming Soon Page</h1>
	<!--//header-->
	<!-- content -->
	<div class="main-content-agile">
		<div class="w3l-agile">
			<h2>We are on the way</h2>
			<p>Stay tuned for something amazing</p>
		</div>
		<!--timer-->
		<div class="examples">
			<div class="simply-countdown-losange" id="simply-countdown-losange">
			<div class="simply-section">
				<div>
					<span class="simply-amount">1</span>
					<span class="simply-word">days</span>
				</div>
			</div>
			<div class="simply-section">
				<div>
					<span class="simply-amount">1</span>
					<span class="simply-word">hour</span>
				</div>
			</div>
			<div class="simply-section">
				<div>
					<span class="simply-amount">0</span>
					<span class="simply-word">minutes</span>
				</div>
			</div>
			<div class="simply-section">
				<div>
					<span class="simply-amount">4</span>
					<span class="simply-word">seconds</span>
				</div>
			</div>
			</div>
			<div class="clear"></div>
		</div>
		<!--//timer-->
	</div>
	<!-- //content -->
	<!-- footer -->
	<div class="footer">
		<p>Beijing Time</p>
		<p id="now">
			<!-- 2022年09月02日 09:15:00 -->
		</p>
	</div>

二、JavaScript部分

获取当前时间

背景时间能自动每秒刷新id=“now”

var now = document.getElementById("now");
	window.setInterval(function(){
		now.innerHTML = moment().format("YYYY年MM月DD日 HH:mm:ss")
	},1000);

倒计时

当天、时、分、秒都为零时，倒计时结束，全为0；
当秒大于0时，秒-1，当不大于0时，需要向分借1，秒变为59，此时需要判断分是否大于0；
分大于0时，分-1，不大于0时，需要向小时借1，分变为59，此时需要判断小时是否大于0；
小时大于0时，小时-1，不大于0时，需要向天借，小时变为23，此时需要判断天是否大于0；
天大于0时，天-1，直到天变为0，停止。
也就是说，秒变成0需要借1时，分也为0，向小时借，小时也为0，又向天借，天还为0，此时满足第一条，全为0，结束倒计时

var days = document.getElementsByClassName("simply-amount")[0];
		var hours = document.getElementsByClassName("simply-amount")[1];
		var minutes = document.getElementsByClassName("simply-amount")[2];
		var seconds = document.getElementsByClassName("simply-amount")[3]; 
		setInterval(function(){
			if(seconds.textContent==0 && minutes.textContent==0 && hours.textContent==0 && days.textContent==0){
				clearInterval();
			}else{
				if(seconds.textContent>0){
					seconds.textContent--;
				}else{
					seconds.textContent=59;
					if(minutes.textContent>0){
						minutes.textContent--;
					}else{
						minutes.textContent=59;
						if(hours.textContent>0){
							hours.textContent--;
						}else{
							hours.textContent=23;
							if(days.textContent>0){
								days.textContent--;
							}
						}
					}
				}
			}
		},1000);

修改倒计时

点击倒计时矩形框class="simply-section"弹出会话框可以重新设置倒计时对应的天数days/小时hour/分钟minutes/秒数second
重新设置时，天数无约束，小时不得>=24，分钟与秒钟不得>=60，否则修改失败；

document.getElementsByClassName("simply-section")[0].onclick = function(e){
				var d = prompt("天",days.textContent);
				days.textContent = d;
		}
		document.getElementsByClassName("simply-section")[1].onclick = function(e){
				var h = prompt("时",hours.textContent);
				if(h<24){
					hours.textContent = h;
				}
		}
		document.getElementsByClassName("simply-section")[2].onclick = function(e){
				var m = prompt("分",minutes.textContent);
				if(m<60){
					minutes.textContent = m;
				}
		}
		document.getElementsByClassName("simply-section")[3].onclick = function(e){
				var s = prompt("秒",seconds.textContent);
				if(s<60){
					seconds.textContent = s;
				}
		}