本文简单利用定时器setTimeout和setInterval举了两个小栗子：定时炸弹和1-100递增
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-14定时器</title>
<style>
em {
font-style: normal;
}
</style>
</head>
<body>
<h2>@定时器</h2>
<!-- ----------------------------------13-------------------------------------------------------------- -->
<br>
<h3>13 在页面上显示10秒的倒计时， 然后显示“ boom!!!”</h3>
<em id="p1">定时器开启,10S倒计时开始:</em>
<em id="p2"></em>
<script>
var count1 = 10
var changeP = document.querySelector("#p1")
var changeP2 = document.querySelector("#p2")
// 设定一个10s的定时器
setTimeout(
function () {
changeP.innerText = "噫吁嚱,要boom了!!!"
},
10 * 1000
)
// 设定一个10s倒计时
var timer = setInterval(
function () {
--count1
changeP2.innerText = count1
if (count1 === 0) {
clearInterval(timer)
count1 = 10
}
}, 1000
)
</script>
<!-- ----------------------------------14-------------------------------------------------------------- -->
<br>
<h3>14 每秒产生并打印递增的自然数1、 2、 3...，直到100为止， 点击按钮暂停 / 继续</h3>
<em id="em4">倒递增的自然数</em>
<button id="btnClear">暂停</button>
<script>
var em4 = document.querySelector("#em4")
var btnClear = document.querySelector("#btnClear")
var count = 1
var timerId = null
// 开始倒计时
function startAutoPlay() {
if (!timerId) {
timerId = setInterval(
function countNumber() {
em4.innerText = count++
if (count === 100) {
clearInterval(timer)
count = 0
}
},
1000
)
}
}
startAutoPlay()
// 给按钮绑定事件委托，实现暂停/继续的功能
btnClear.addEventListener(
"click",
function (e) {
if (e.target.innerText === "暂停") {
clearInterval(timerId)
timerId = null
btnClear.innerText = "继续"
} else if (e.target.innerText === "继续") {
startAutoPlay()
btnClear.innerText = "暂停"
}
}
)
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/36691.html
