我的 HTML、CSS 和 JS 进度条不起作用答案

【问题标题】：My HTML, CSS and JS progress bar doesn't work我的 HTML、CSS 和 JS 进度条不起作用
【发布时间】：2020-04-11 18:21:56
【问题描述】：

我正在尝试制作一个进度条，以便用户可以知道他们的文件何时会被下载。我不知道我做错了什么，但进度条样式不会在 for 循环中更新。

var filesize = 1000 //this is not the final value 
var progressbar = document.getElementById("progress");
function myFunction(){
  for(var i = 0; i <= filesize; i++){
    x = i/ filesize * 100;
    x = parseInt(x.toString().slice(0, 3));
    console.log(x + "%")
    progressbar.style.width = x + "%";
  }
}

#bar{
    width: 35%;
    background-color: rgba(0,0,0,0.17);
    border-radius: 130px;
    margin: auto;
  }
  #progress{
    width: 0%;
    height: 30px;
    background-color: rgb(255, 0, 0);
    border-radius: 130px;
  }

    <button onclick="myFunction()">Click me</button>
    <div id="bar">
      <div id="progress"></div>
    </div>

【问题讨论】：

您可以使用 setInterval 和 setTimeout 来表示您的进度！
无法重现您的问题 - 我在 FF 和 Chrome 中运行良好（尽管速度太快，无法真正看到进度变化）。也许尝试根据@Ebrahim 的建议放慢速度？

标签： javascript html css progress-bar

【解决方案1】：

您可以通过在 CSS 中添加 transition 属性来使进度条平滑移动。

过渡时间越长，进度条移动越慢。

var filesize = 1000 //this is not the final value 
var progressbar = document.getElementById("progress");
function myFunction() {
  for (var i = 0; i <= filesize; i++) {
    x = i/ filesize * 100;
    x = parseInt(x.toString().slice(0, 3));
    console.log(x + "%")
    progressbar.style.width = x + "%";
  }
}

#bar {
  width: 35%;
  background-color: rgba(0,0,0,0.17);
  border-radius: 130px;
  margin: auto;
}
   
#progress {
  width: 0%;
  height: 30px;
  background-color: rgb(255, 0, 0);
  border-radius: 130px;
  transition: 0.2s;
}

<button onclick="myFunction()">Click me</button>
  <div id="bar">
    <div id="progress">
  </div>
</div>

【讨论】：