Javascript Jquery在按钮上单击带有进度条的do计时器

所以我试着做一个小游戏，但第一步就是不起作用。 这是我的密码

<div id="box1">
        <button id="button">Click Me</button>
        <div id="progress-bar"></div>
    </div>

$('button').click(function() {
var progressBar = $('#progress-bar'),
width = 0;
progressBar.width(width);
var interval = setInterval(function () {
    width += 2.5;
    progressBar.css('width', width + '%');
    if (width >= 100) {
        clearInterval(interval);
    }
 }, 125)
});

#progress-bar {
width: 0;
background: red;
text-align: center;
overflow: hidden;   
height: 4px;
position: absolute;
bottom: 0px;
}
#box1 {
height: 100px;
width: 600px;
position: relative;
border: 1px solid grey;
}

点击我
$（“按钮”）。单击（函数（）{
var progressBar=$（“#进度条”），
宽度=0；
进度条宽度（宽度）；
var interval=setInterval（函数（）{
宽度+=2.5；
css（'width'，width+'%'）；
如果（宽度>=100）{
间隔时间；
}
}, 125)
});
#进度条{
宽度：0；
背景：红色；
文本对齐：居中；
溢出：隐藏；
高度：4px；
位置：绝对位置；
底部：0px；
}
#框1{
高度：100px；
宽度：600px；
位置：相对位置；
边框：1px纯灰；
}

因此，当单击按钮时，box1底部将显示一个进度条。 当执行“文档准备就绪”操作时，它工作，但使用时。单击它不工作。

当执行“文档准备就绪”操作时，它工作，但使用时。单击它不工作

当您有一个

$（document.ready

包装在您的代码中时，它就可以工作了，因为这会指示javascript引擎在尝试执行之前等待所有的js被完全加载

如果您没有

$（document）.ready

，并且在加载所有内容之前单击，则会出现控制台错误

---

按F12打开developer toos并执行相同的操作，我怀疑您会在控制台中看到错误

哇，我真的很笨。。。谢谢你的快速反应！这起作用了。