点击开始，读取进度条，数字显示读取百分比
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0 auto; padding:0;} #wai{ width:320px; height:30px; margin-top:100px;} #btn{ width:50px; height:30px; margin-right:20px; background-color:#00F; text-align:center; line-height:30px; color:#fff; float:left;} #kuang{ width:200px; height:28px; border:1px solid blue; float:left; } #btn:hover{ cursor:pointer;} #jindu{ height:28px; background-color:blue; margin-left:0;} #shu{ width:30px; height:30px; text-align:center; line-height:30px; float:left;} </style> </head> <body> <div id="wai"> <div id="btn">开始</div> <div id="kuang"> <div id="jindu" style=" 0%;"></div> </div> <div id="shu">0</div> </div> </body> </html> <script type="text/javascript"> var btn = document.getElementById("btn"); var jindu = document.getElementById("jindu"); var shu = document.getElementById("shu"); var ids; /* 点击开始读取进度条 */ btn.onclick = function() { ids = window.setInterval("bian()",20) } /* 进度条在达到100%前增长1%，数字显示增加1 */ function bian() { var jd = parseInt(jindu.style.width); if(jd<100) { jd++; } else { window.clearInterval(ids);//达到100%清除间隔 } jindu.style.width = jd+"%"; shu.innerText = jd; } </script>
效果 