js应用例子——进度条

<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>

posted @ 2017-12-24 15:01  FTHeD  阅读(102)  评论(0编辑  收藏  举报