老师帮看下第三个为什么会掉下来

来源:3-13 编程练习

weixin_慕尼黑0465866

2023-02-27 11:16:38

<!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+"&nbsp;";
                    }, 1000)
                }
            },
            stop: function () {
                // 在此补充代码
                stopBtn.onclick = () => {
                    clearInterval(this.timer)
                }
            },
        }
        // 在此补充代码
        show.start();
        show.stop();
    </script>
</body>

</html>
写回答

1回答

imooc_慕慕

2023-02-27

同学你好 ,分析如下;

这里是由于双引号+空格与&nbsp不一样导致的,参考修改如下:

https://img.mukewang.com/climg/63fc244209e1878304280111.jpg

祝学习愉快~

0
hmooc_慕慕
回复
heixin_慕尼黑0465866
hp>同学你好,&nbsp为不换行空格又因为设置的盒子的宽度不够因此他只能从world单词前面进行换行,所以出现了同学的效果,而双引号空格则没有这个要求所以此处适合使用后者,在日常开发中灵活使用即可。

祝学习愉快~

h023-02-27
共2条回复

0 学习 · 17877 问题

查看课程