js进度条小事例

Posted 2020-10-29 悔创阿里-杰克马

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