JavaScript入門學習(2)--進度條
阿新 • • 發佈：2018-06-21
tel htm type () doc element TE light document
<html>
<style type="text/css">
#bar{width:0px; height:20px;
background:#ee00ff;}//定義進度條的前景色
</style>
<script>
var act;
function over(){
var w=document.getElementById("bar").style.pixelWidth;
if (w<400){
document.getElementById("bar").style.pixelWidth=w+2;
document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";
clearTimeout(act);
act=setTimeout(over,10);
} else{document.getElementById("txt").innerText="載入完成100%";
};
};
function out(){
var w=document.getElementById("bar").style.pixelWidth;
if (w>0){
document.getElementById("bar").style.pixelWidth=w-2;
document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";
clearTimeout(act);
act=setTimeout(out,10);
} else{document.getElementById("txt").innerText="載入完成0%";
};
};
function Apouse(){
clearTimeout(act);
};
</script>
<button onclick="over()">開始轉入</button><br>
<button onclick="out()">開始卸載</button><br><br>
<button onclick="Apouse()">暫停</button><br><br>
<h4 id="txt">等待載入</h4>
<div id="bar"></div>
</html>
JavaScript入門學習(2)--進度條