js进度条 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 300px;
                height: 30px;
                box-sizing: border-box;
                border: 1px solid red;
                overflow: hidden;
            }
            .show{
                height: 100%;
                width: 0px;
                box-sizing: content-box;
                background-color: #FFFF00;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var odiv = document.querySelectorAll("div")[0];
                //拿到show
                var show = document.querySelectorAll("div")[1];
                //拿到按钮
                var obtn = document.querySelectorAll("button")[0];
                //拿到span
                var ospan = document.querySelectorAll("span")[0];
                var timer;
                obtn.onclick = function(){
                    clearInterval(timer);
                    var num = 0;
                    //开启定时器
                     timer = setInterval(function(){
                        num += 1;
                        var bfb = Math.round((num/30)*10);
                        //让show的宽度增加
                        if(num == odiv.offsetWidth){
                            clearInterval(timer);
                        }
                        show.style.width = num + "px";
                        ospan.innerText = bfb + "%";
                    },50)
                }
            }
        </script>
    </head>
    <body>
        <div class="box">
            <div class="show"></div>    
        </div>
        <span>0%</span>
        <button>开始</button>
    </body>
</html>

 

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 30px;box-sizing: border-box;border: 1px solid red;overflow: hidden;}.show{height: 100%;width: 0px;box-sizing: content-box;background-color: #FFFF00;}</style><script type="text/javascript">window.onload = function(){var odiv = document.querySelectorAll("div")[0];//拿到showvar show = document.querySelectorAll("div")[1];//拿到按钮var obtn = document.querySelectorAll("button")[0];//拿到spanvar ospan = document.querySelectorAll("span")[0];var timer;obtn.onclick = function(){clearInterval(timer);var num = 0;//开启定时器 timer = setInterval(function(){num += 1;var bfb = Math.round((num/30)*10);//让show的宽度增加if(num == odiv.offsetWidth){clearInterval(timer);}show.style.width = num + "px";ospan.innerText = bfb + "%";},50)}}</script></head><body><div class="box"><div class="show"></div></div><span>0%</span><button>开始</button></body></html>

 

posted @ 2022-03-29 16:10  st-159  阅读(51)  评论(0)    收藏  举报