js实现定时器

爱吃巧克li

已于 2023-11-22 09:57:15 修改

阅读量153

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-08-23 14:53:59 首次发布

本文链接：https://blog.csdn.net/lplovewjm/article/details/132452159

版权

JavaScript 专栏收录该内容

43 篇文章 2 订阅

订阅专栏

js实现定时器

实现定时器

实现定时器

在这里插入图片描述
用原生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', "<div id='a'>0" + minutes + ":" + "0" +
						seconds + "</div>")
				} else if (minutes < 10 && seconds >= 10) {
					parent.insertAdjacentHTML('afterend', "<div id='a'>0" + minutes + ":" + seconds +
						"</div>")
				} else if (minutes >= 10 && seconds < 10) {
					parent.insertAdjacentHTML('afterend', "<div id='a'>" + minutes + ":" + "0" +
						seconds + "</div>")
				} else {
					parent.insertAdjacentHTML('afterend', "<div id='a'>" + minutes + ":" + seconds +
						"</div>")
				}

			}

			function closebtn() {
				isShow = false
			}
			ShowTime()
		</script>
	</body>
</html>

爱吃巧克li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现定时器

Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。用原生js实现一个倒计时效果.最下面有全部源码,需要自取。():可以根据Id来移除该元素.():js中增加HTML元素.
复制链接

扫一扫