为什么我设表先关了 但是一直点击开始就一直不出现新的文字 没办法正常那样走了
来源:3-13 编程练习
weixin_慕村1291783
2020-11-18 11:18:49
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div {
width: 300px;
margin: 20px 0;
line-height: 30px;
background: yellowgreen;
}
</style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="box"></div>
<script>
const startBtn = document.getElementById('start')
const stopBtn = document.getElementById('stop')
const box = document.getElementById('box')
var show = {
content: "Hello World",
timer: null,
start: function() {
// 在此补充代码
startBtn.onclick = () => {
clearInterval(this.timer);
this.timer = setInterval(() => {
box.innerHTML += this.content;
}, 1000);
}
},
stop: function() {
stopBtn.onclick = () => {
clearInterval(this.timer);
}
// 在此补充代码
},
}
// 在此补充代码
show.start();
show.stop();
</script>
</body>
</html>
1回答
同学你好,老师测试你的代码,效果是正确的。同学所说的问题,是指快速、多次点击开始按钮的过程中文字不会出现吗?如果是话,这是正常的,因为点击事件中,是先将定时器清除,再新建一个定时器,如下:
所以,只有当停止点击开始按钮,定时器才会开始计时,然后1s后再为box设置内容。
如果不是这里,可以具体说明一下(可以截图),以便老师尽快定位问题,并为你解答。
祝学习愉快!
相似问题