使用进度计数完成后使进度条消失

Question

大家好

我需要你的专业知识来让我的进度条消失，以便内容位置在行达到 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 + '%'; 
    }
  }
}

提前致谢

Answer 1

在你的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>

Answer 2

试试这个

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>

Answer 3

将您的 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 + '%'; 
      }
    }
  }

使用进度计数完成后使进度条消失

Make progress bar disappear once complete with progress count

html

javascript

jquery

progress-bar