用原生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>
