码迷,mamicode.com
首页 > Web开发 > 详细

js应用例子——进度条

时间:2017-12-24 15:52:08      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:tin   func   start   onclick   点击事件   css   进度条   text   round   

<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应用例子——进度条

标签:tin   func   start   onclick   点击事件   css   进度条   text   round   

原文地址:http://www.cnblogs.com/forqiwen/p/8098100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!