HTML 5 进度条，用于渐进式 JavaScript 事件处理
5.00/5 (2投票s)
尝试使用此 HTML 5 代码块
创建一个新的 HTML 文件，并将以下代码复制到其中，即可在浏览器中查看结果
<html>
<title>HTML 5 Progress Bar For Progressive Javascript Events Processing</title>
<body>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
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>
</body>
</html>