Javascript 引导4-进度条在浏览器上不起作用_Javascript_Twitter Bootstrap_Progress Bar

Javascript 引导4-进度条在浏览器上不起作用

javascript twitter-bootstrap

Javascript 引导4-进度条在浏览器上不起作用,javascript,twitter-bootstrap,progress-bar,Javascript,Twitter Bootstrap,Progress Bar,我正在使用引导v4.0.0-alpha.6。我想要运行的代码在js fiddle上运行得非常好，但是一旦我在服务器上运行它，它就不会显示进度条。你知道我哪里出了问题吗这里有一个链接到我的下面的代码是一个具有引导功能的php页面 <!DOCTYPE HTML> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha38

我正在使用引导v4.0.0-alpha.6。我想要运行的代码在js fiddle上运行得非常好，但是一旦我在服务器上运行它，它就不会显示进度条。你知道我哪里出了问题吗

这里有一个链接到我的

下面的代码是一个具有引导功能的php页面

<!DOCTYPE HTML>

<html>

<head>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<script>


var progressBar = $('.progress-bar');
var percentVal = 0;


window.setInterval(function(){
    percentVal += 20;
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100)
    {
       var link = document.getElementById('nav-ask');
link.style.display = 'none'
    }

}, 500);
</script>

</head>

<body>



  <div class="row">
        <div class="col-xs-8">
            <div class="progress"id="nav-ask">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
                </div>
                </div>


var progressBar=$（'.progressBar'）；
var percentVal=0；
setInterval（函数（）{
百分比值+=20；
css（“宽度”，percentVal+'%'）.attr（“aria valuenow”，percentVal+'%'））.text（percentVal+'%'）；
如果（percentVal==100）
{
var link=document.getElementById（'nav-ask'）；
link.style.display='none'
}
}, 500);
0%

运行脚本时，页面未准备就绪。因此，只需在加载html后将脚本放在下面即可。然后它就起作用了

...
 <div class="row">
        <div class="col-md-12">
            <div class="progress"id="nav-ask">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
                </div>
                </div>

<script>
Your script here.
</script>
</body>

这样可以避免将代码放在页面底部使其正常工作。

检查控制台并告诉我们它显示了什么页面加载后控制台为空。没有显示错误。请检查答案。现在它可以工作了。是的。它确实有用！谢谢！！

$(document).ready(function(){
   your script
})