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

I need help adding a button to perform this HTML code

本文关键字：按钮 执行 代码 HTML 一个 帮助 添加      更新时间：2023-09-26

我需要帮助将我的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>

这是两回事:html代码&脚本代码。所以我认为最好对他们每个人都有不同的表现。我猜你想在按钮被点击时显示进度条。如果我是对的，那么您可以用div标签包装进度条html代码，并将其显示样式设置为none - <div style="display:none">...</div>。然后在函数中添加所有脚本，例如startProgress，并在函数顶部添加一行代码，以更改div display样式为block。它必须看起来像这样:

<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>
相关文章：