1. 程式人生 > >js應用例子——進度條

js應用例子——進度條

back set cti head round .get sta idt col

<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:100%; height:600px;}
#jwk{ width:200px; height:15px; margin-top:50px; border:1px solid #F00;}
#nei{ width:0px; height:15px; background-color:#F30; margin-left:0px; }
</style>
</head>
<body>
<div id="wai">
<div id="jwk">
<div id="nei" style="width:0px;"></div>
</div>
<input type="button" value="開始" id="start">//插入一個開始按鈕
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById("start");
var nei = document.getElementById("nei");

//設置按鈕的點擊事件,
btn.onclick =function(){

//每20毫秒調用一次jia()方法;
window.setInterval("jia()",20)
}//寫一個jia的方法,進度條裏面的顏色每加一點

function jia(){
var nw = parseInt(nei.style.width);
if(nw<200){
nw++;
}
nei.style.width = nw+"px";
}
</script>

js應用例子——進度條