分钟倒计时效果实现

蒲公英1001

已于 2024-03-26 11:37:29 修改

阅读量599

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2024-03-26 11:36:10 首次发布

本文链接：https://blog.youkuaiyun.com/wangyining070205/article/details/137040921

文章讨论了一种JavaScript实现的分钟倒计时代码，原始代码有复杂的if语句。作者尝试简化显示格式，但遇到min数值问题，通过字符串截取解决了显示0前补零的问题。最终提供了修改后的代码示例和运行效果。

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

之前在一篇文章中写过倒计时的代码，剩余多少天时分秒，后来见过别人写的一种分钟倒计时代码，它的思路和我实现的思路不同，不是求出两个时间之间相差多少秒，然后转成天、时、分、秒，而是分和秒同时为0时，定时器停止，具体代码如下。

<script type="text/javascript">
			var min = prompt("请输入分钟数");
			var sec = 1; //秒,初始值为1,头一次运行后-1变为0
			function getCountDown() {
				if (min == 0 && sec == 0) {
					alert("倒计时结束");
					clearInterval(myTime);
				} else if (min >= 0) {
					if (sec > 0) {
						sec--;
					} else if (sec == 0) {
						min--;
						sec = 59;
					}
				}
				var countdown = document.querySelector("#countDown");
					if ((min < 10) && (sec < 10)) {
						countdown.innerHTML = "<span>" + '0' + min + "</span> ：<span>" + '0' + sec + "</span>";
					} else if ((min < 10) && (sec >= 10)) {
						countdown.innerHTML = "<span>" + '0' + min + "</span> ：<span>" + sec + "</span>";
					} else if ((min >= 10) && (sec < 10)) {
						countdown.innerHTML = "<span>" + min + "</span> ：<span>" + '0' + sec + "</span>";
					} else
						countdown.innerHTML = "<span>" + min + "</span> ：<span>" + sec + "</span>";
				}
		
				var myTime = setInterval(getCountDown, 1000);
		</script>

我觉得这个思路也不错，就是后期显示时，if语句分了四种情况，代码看上去有些复杂，于是把if语句改变了一下

min = (min < 10) ? ('0' + min): min
sec = (sec < 10) ? ('0' + sec) : sec
countdown.innerHTML = `<span>${min}</span> ：<span>${sec}</span>`

原以为这样做代码简洁一目了然，结果运行时发现出现了一个新问题，举例说明，min会从2变成02，002，0002，00002，这可不是我希望的，然后想到了一个解决办法，使用字符串的slice(-2)或substr(-2)方法，截取后2位字符，可以解决这个问题。

min = (min < 10) ? ('0' + min).substr(-2) : min
sec = (sec < 10) ? ('0' + sec).substr(-2) : sec

修改后的完整代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<title> 倒计时 </title>
		<meta charset="utf-8">
		<style>
			h1 {
				text-align: center;
				font-size: 60px;
				color: #333;
			}

			.red {
				color: #EF005C;
			}

			h1 span {
				background-color: #EF005C;
				display: inline-block;
				color: #fff;
				width: 100px;
				height: 80px;
			}
		</style>
		
	</head>
	<body>
		<h1>距离结束</h1>
		<h1 id="countDown" class="red"></h1>
		<script type="text/javascript">
			var min = prompt("请输入分钟数");
			var sec = 1; //秒,初始值为1,头一次运行后-1变为0
			function getCountDown() {
				if (min == 0 && sec == 0) {
					alert("倒计时结束");
					clearInterval(myTime);
				} else if (min >= 0) {
					if (sec > 0) {
						sec--;
					} else if (sec == 0) {
						min--;
						sec = 59;
					}
				}
		    var countdown = document.querySelector("#countDown");
		    min = (min < 10) ? ('0' + min).substr(-2) : min
		    sec = (sec < 10) ? ('0' + sec).substr(-2) : sec
		    countdown.innerHTML = `<span>${min}</span> ：<span>${sec}</span>`
		    }
		    var myTime = setInterval(getCountDown, 1000);
		</script>
	</body>
</html>

这是运行效果：在这里插入图片描述