Bootstrap 4-进度条在浏览器上不起作用答案

【问题标题】：Bootstrap 4- Progress Bar does not work on the browserBootstrap 4-进度条在浏览器上不起作用
【发布时间】：2017-08-28 20:17:26
【问题描述】：

我正在使用 Bootstrap v4.0.0-alpha.6。我想运行的代码在 js fiddle 上运行良好，但是一旦我通过服务器运行它，它就不会显示进度条。关于我哪里出错的任何想法？

这是我的JS Fiddle的链接

下面的代码是一个带有bootstrap的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>

【问题讨论】：

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

标签： javascript twitter-bootstrap progress-bar

【解决方案1】：

当您的脚本运行时，页面还没有准备好。因此，只需在 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>

我已将大小设置为col-md-12，以便我可以正确看到它。

替代方案：-

当你使用 jquery 时使用

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

这使您不必将代码放在页面底部以使其正常工作。

【讨论】：