[英]I need help adding a button to perform this HTML code
I need help to add my HTML code to a button. 我需要帮助将HTML代码添加到按钮。 For example, when I press the button, my code starts.
例如,当我按下按钮时,我的代码开始。
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>
These are two different things: html code & scripting code. 这是两件事:html代码和脚本代码。 So I think it is better to behave differently with each of them.
因此,我认为最好对每个人采取不同的行为。 I guess you want to show progress bar when a button is clicked.
我想您想在单击按钮时显示进度栏。 If I'm right, then you can wrap progress bar html code with a div tag and set its display style to none -
<div style="display:none">...</div>
. 如果我是对的,则可以使用div标签包装进度条html代码 ,并将其显示样式设置为none-
<div style="display:none">...</div>
。 Then add all script in a function ex startProgress
and add one line of code at top of your function to change div display style to block . 然后将所有脚本添加到
startProgress
函数中,并在函数startProgress
添加一行代码以将div 显示样式更改为block 。 It must look something like this: 它必须看起来像这样:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.