倒计时setInterval()的使用

最新推荐文章于 2023-04-22 15:14:21 发布

因火成烟

最新推荐文章于 2023-04-22 15:14:21 发布

阅读量675

点赞数

文章标签： setInterval js

本文链接：https://blog.csdn.net/TheFoma/article/details/45530579

版权

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<style type="text/css">
		body,
		div {
			margin: 0;
			padding: 0;
		}
		
		body {
			color: #fff;
		}
		
		#clock {
			width: 300px;
			margin: 10px auto;
			background: none repeat scroll 0 0 #1a1a1a;
			text-align: center;
		}
		
		span {
			background: none repeat scroll 0 0 #fbfbfb;
			border: 2px solid #b4b4b4;
			color: #000;
			line-height: 2;
			margin: 0 10px;
			padding: 0 10px;
			width: 80px;
		}
		
		button {
			background: url("img/btn-1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
			width: 283px;
			height: 50px;
			border: 0 none;
		}
		
		.cancel {
			background-position: 0 -50px;
		}
	</style>
</head>

<body>
	<div id="clock">
		<span>01</span>分钟<span>40</span>秒
		<button></button>
	</div>
	<script type="text/javascript">
		var oClock = document.getElementById("clock");
		var aSpan = oClock.getElementsByTagName("span");
		var oBtn = oClock.getElementsByTagName("button")[0];
		var s = null;
		oBtn.onclick = function () {
			this.className == "" ? (s = setInterval(updateTime, 1000), updateTime()) : (clearInterval(s));
			this.className = this.className == "" ? "cancel" : "";
		}

		function updateTime() {
			var sum = aSpan[0].innerHTML.replace(/^(\d)/, '') * 60 + parseInt(aSpan[1].innerHTML);
			sum--;
			aSpan[0].innerHTML = format(parseInt(sum / 60));
			aSpan[1].innerHTML = format(parseInt(sum %= 60));
		}

		function format(a) {
			return a.toString().replace(/^(\d)$/, "0$1");
		}
	</script>
</body>

</html>

因火成烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时setInterval()的使用

倒计时 body, div { margin: 0; padding: 0; } body { color: #fff; } #clock { width: 300px; margin: 10px auto; background: none repeat scroll 0 0 #1a1a1a; text-align
复制链接

扫一扫