箭头函数的应用3-13编程练习 作业提交
来源:3-13 编程练习
慕越秀工地
2022-07-19 00:16:36
<!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.addEventListener(
'click',
() => {
setInterval(() => {
console.log(this);
show.timer += show.content;
box.innerHTML = show.timer;
},1000);
},
false
);
},
stop: function () {
// 在此补充代码
stopBtn.addEventListener(
'click',
()=> {
clearInterval();
})
},
}
// 在此补充代码
show.start();
show.stop();
</script>
</body>
</html>老师,这题我的代码为啥实现效果的时候多了个null

1回答
同学你好,代码整体思路是可以的,需要修改的地方,参考如下:
1、停止按钮停不下来,需要在停止按钮中添加清除定时器;用timer接收定时器,
多次快速点击开始按钮,定时器会叠加,导致内容显示越来越快,所以在开始的时候也建议先清除一下定时器;
如下图所示:


2、拼接错误,内容第一个是一个null,直接拼接content里面的内容即可;后面在拼接一个空字符串,使每一次的拼接都 有一个间隙;参考如下:

祝学习愉快~
相似问题