大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
本文简单利用定时器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>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185923.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...