我需要添加按鈕來執行此HTML代碼的幫助

Question

我需要幫助將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> 

Answer 1

這是兩件事：html代碼和腳本代碼。 因此，我認為最好對每個人采取不同的行為。 我想您想在單擊按鈕時顯示進度欄。 如果我是對的，則可以使用div標簽包裝進度條html代碼 ，並將其顯示樣式設置為none- <div style="display:none">...</div> 。 然后將所有腳本添加到startProgress函數中，並在函數startProgress添加一行代碼以將div 顯示樣式更改為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>