<style> ???#div1{width: 500px;height: 20px;border: 1px solid gray;} ???#div2{height: 20px;width: 0px;background:green;}</style>?????
? <div id="div1"> ???????????<div id="div2"></div> ???????</div> ???????<span id="span1"></span> ???????<input type="button" value="start" id="btnone"> ???????<input type="button" value="end" id="btnend"> ???????<script> ???var n=0 ???????function move(){ ?????????????????n++; ???????div2.style.width=n+"px"; ???????????????if(n==500){ ???????????????????clearInterval(timer); ???????????????} ???????????????if (n>500) { ???????????????????????n=0; ???????????????????} ???????span1.innerHTML = (n/500*100).toFixed(2)+"%" ???????}; ???????var timer; ???????btnone.onclick = function(){ ???????clearInterval(timer); ????????timer = setInterval(move,50); ???????} ???????btnend.onclick = function(){ ???????????clearInterval(timer); ???????}</scirpt>
js进度条小事例
原文地址：https://www.cnblogs.com/l8l8/p/8718292.html