JavaScript倒计时功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55068275/article/details/122295953

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.countdown {
				width: 300px;
				height: 100px;
				border: 1px solid;
				margin: 0 auto;
				text-align: center;
				background-color: black;
				color: white;
			}

			span {
				border: 3px solid;
				padding: 0 10px;
				margin: 10px;
			}

			input {
				background-color: blue;
				width: 200px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="countdown">
			<p><span id="min">01</span>分钟<span id="sec">10</span>秒</p>
			<input type="button" name="" id="" value="开始倒计时" />
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function() {
				// 变量
				var $btn = $("[type='button']");
				// 控制开始计时的状态标记
				var isBegin = false;
				// 保存并开始倒计时
				var time = null;

				// 点击按钮
				$btn.click(function() {
					if (isBegin == false) {
						$btn.val("开始倒计时");
						time = setInterval(formtTime, 1000);
					} else {
						$btn.val("暂停倒计时");
						clearInterval(time);
					}

					// 每次点击取反
					isBegin = !isBegin;

					//封装方法点击事件
					function formtTime() {
						var $spanMin = $("#min");
						var $spanSec = $("#sec");

						// 剩余时间统计转化为秒数
						var aTimes = $spanMin.text() * 60 + $spanSec.text() * 1;

						// 判断倒计时是否结束
						if (aTimes == 1) {
							$btn.val("倒计时结束");
						}
						// 判断倒计时是否等于0
						if (aTimes == 0) {
							clearInterval(time);
							return;
						}
						aTimes--;

						// 再转化为分钟数和秒数显示在页面

						var minute = parseInt(aTimes / 60);
						var second = aTimes % 60;

						var showMin = minute < 10 ? '0' + minute : minute;
						var showSec = second < 10 ? '0' + second : second;
						
						$spanMin.html(showMin);
						$spanSec.html(showSec);
					}
				});


			});
		</script>
	</body>
</html>