Bootstrap 4-進度條在瀏覽器上不起作用

我正在使用Bootstrap v4.0.0-alpha.6。我想運行的代碼在js小提琴上工作得非常好，但是一旦我通過服務器運行它，它不會顯示進度條。任何想法，我要去哪裏錯了？Bootstrap 4-進度條在瀏覽器上不起作用

這裏是我的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/[email protected]/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>

來源

2017-08-28 user3402248

檢查控制檯並告訴我們顯示的內容 – coderredoc

頁面加載後控制檯爲空白。顯示沒有錯誤。 – user3402248

檢查答案..現在可以運作 – coderredoc

當你的腳本運行時，頁面還沒有準備好。因此，只需在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 
})

這樣可以節省你把你的代碼在頁面的底部，使其工作。

來源

2017-08-28 20:29:10 coderredoc

Bootstrap 4-進度條在瀏覽器上不起作用

回答

相關問題