完成進度條后使進度條消失

他大家。

我需要您的專業知識才能使我的進度條消失，以便在行達到 100% 時內容位置再次回到頂部，并顯示進度數。

有人可以幫幫我嗎？謝謝

這是我的CSS

#myProgress {
   margin-top:20%;
  width: 100%;
  background-color: #ddd;
}

#myBar {

  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
#content{
    display:none;
}

html

<div id="myProgress">
<h1>Searching for best online fare...</h1>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
<div id="content">  
test
</div>

JS

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('content').style.display='block';
    } else {
      width  ; 
      elem.style.width = width   '%'; 
    }
  }
}

提前致謝

uj5u.com熱心網友回復：

在你里面if(width >= 100)你可以做elem.style.display = 'none'

對于進度條內的進度文本，您可以執行elem.innerHTML = width "%";

演示

顯示代碼片段

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
      elem.style.display = 'none'
      document.querySelector("#myProgress h1").style.display = 'none';
      document.getElementById('content').style.display = 'block';

    } else {
      width  ;
      elem.innerHTML = width   "%";
      elem.style.width = width   '%';
    }
  }
}

#myProgress {
  margin-top: 20%;
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

#content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myProgress">
  <h1>Searching for best online fare...</h1>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>
<div id="content">
  test
</div>

uj5u.com熱心網友回復：

試試這個

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('content').style.display='block';
      document.getElementById('myProgress').style.display='none'
    } else {
      width  ; 
      elem.style.width = width   '%'; 
    }
  }
}

#myProgress {
   margin-top:20%;
  width: 100%;
  background-color: #ddd;
}

#myBar {

  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
#content{
    display:none;
}

<div id="myProgress">
<h1>Searching for best online fare...</h1>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
<div id="content">  
test
</div>

uj5u.com熱心網友回復：

將您的 js 更改為：

function move() {
    var elem = document.getElementById("myBar");  
    var id = setInterval(frame, 10);
    var width = 1;
    function frame() {
        console.log(width);
      if (width >= 100) {
        clearInterval(id);
        document.getElementById('content').style.display='block';
        document.getElementById('myProgress').style.display='none';
      } else {
        width  ; 
        elem.style.width = width   '%'; 
      }
    }
  }

標籤：javascript html jQuery 进度条

上一篇：從javascript物件中提取陣列

下一篇：如何覆寫tabBarOptions并更改導航圖示的顏色？