Question

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

<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;
}

因此，当点击按钮时，box1底部会有一个进度条。在准备文件时，它可以正常工作，但在使用.click时，它无法正常工作。

Answer 1

在准备好文档时，它可以正常工作，但在使用.click时它不起作用。

当你的代码被$(document).ready包裹时，它会起作用，因为它指示javascript引擎在尝试执行之前等待所有js完全加载。

如果您没有$(document).ready并且在加载所有内容之前单击，那么您将收到控制台错误。

按F12打开开发人员toos并执行相同的操作，我怀疑你会在控制台中看到错误。

单击按钮上的Jquery执行带进度条的计时器

1 个答案: