Question

感谢您的快速回复，我真的很喜欢它，我会将完整的工作代码放在任何想要使用它的人的下面。

HTML CODE

<html>
  <body>
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <span id="status"></span>
    <h1 id="finalMessage"></h1>
    <button onclick='start(0)'>Click</button>
  </body>
</html>

JAVASCRIPT CODE

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is complete";
  }
}
var amountLoaded = 0;
//start(amountLoaded);

Answer 1

你可以这样做：

＆＃13;

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is complete";
  }
}

＆＃13;

<html>

<body>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <span id="status"></span>
  <h1 id="finalMessage"></h1>
  <!-- Add Button with event Click
  with this event start your progressbar with your function -->
  <button onclick='start(0)'>Click</button>
</body>

</html>

＆＃13;

Answer 2

不确定这是不是您要找的，但请看一下：https://jsfiddle.net/sLggoyqn/1/

<button onClick="start(0);">Start</button>

Answer 3

以下是点击按钮

时填充进度条的工作代码

＆＃13;

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is complete";
  }
}

＆＃13;

<html>
  <body>
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <span id="status"></span>
    <h1 id="finalMessage"></h1>
    <button onclick="start(0)">Click me</button>
  </body>
</html>

＆＃13;

html按钮onclick启动javascript progressbar

3 个答案: