js实现定时器

js实现定时器_第1张图片
用原生js实现一个倒计时效果.最下面有全部源码,需要自取

js语法:
setTimeout:定时器
document.getElementById:Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。
remove():可以根据Id来移除该元素.
insertAdjactHTM():js中增加HTML元素.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn" onclick="startTimer()">开始计时</button>
		<button id="closebtn" onclick="closebtn()">取消计时</button>
		<div id="one">

		</div>
		<script>
			let minutes = 59
			let seconds = 59
			let isShow = true
			function startTimer() {
				setTimeout(() => {
					if (isShow) {
						if (seconds > 0) {
							seconds -= 1;
						} else if (minutes > 0) {
							minutes -= 1;
							seconds = 59;
						} else {
							clearTimeout(timer); // 取消计时器
						}
						ShowTime();
						if (minutes === 0 && seconds === 0) {
							console.log("计时结束");
						} else {
							startTimer(); // 继续计时
						}
					}
				}, 1000);
			}

			function ShowTime() {
				const son=document.getElementById('a');
				const parent=document.getElementById('one')
				if (son) {
					son.remove()
				}
				if (minutes < 10 && seconds < 10) {
					parent.insertAdjacentHTML('afterend', "
0" + minutes + ":" + "0" + seconds + "
"
) } else if (minutes < 10 && seconds >= 10) { parent.insertAdjacentHTML('afterend', "
0" + minutes + ":" + seconds + "
"
) } else if (minutes >= 10 && seconds < 10) { parent.insertAdjacentHTML('afterend', "
" + minutes + ":" + "0" + seconds + "
"
) } else { parent.insertAdjacentHTML('afterend', "
" + minutes + ":" + seconds + "
"
) } } function closebtn() { isShow = false } ShowTime() </script> </body> </html>

你可能感兴趣的:(js,javascript,开发语言,ecmascript)