我需要帮助添加一个按钮来执行此HTML代码

时间:2016-10-09 07:20:22

标签: javascript html progress-bar

我需要帮助才能将HTML代码添加到按钮中。 例如,当我按下按钮时,我的代码就开始了。



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

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

这是两个不同的东西:html code&amp;脚本代码。所以我认为对每个人表现出不同的表现会更好。我猜你想在点击一个按钮时显示进度条。如果我没错,那么您可以使用 div 标记打包进度条html代码,并将其显示样式设置为 - <div style="display:none">...</div>。然后在函数e.x中添加所有脚本。 startProgress并在功能顶部添加一行代码,将div 显示样式更改为阻止。它必须看起来像这样:

<div id="divProgbar" style="display:none">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status"></span> <h1 id="finalMessage"></h1>
</div>
<script>
function startProgress(){
document.getElementById('divProgbar').style.display='block';
function progressBarSim(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al+"%";
  bar.value = al;
  al++;
 var sim = setTimeout("progressBarSim("+al+")",300);
 if(al == 100){
   status.innerHTML = "100%";
   bar.value = 100;
   clearTimeout(sim);
   var finalMessage = document.getElementById('finalMessage');
   finalMessage.innerHTML = "Process is complete";
 }
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
}
<script>
<button onclick="javascript:startProgress(); return false;">Start progress</button>