用JavaScript写一个进度条

var porpressBar = document.getElementById('progressBar')
        var info = document.getElementById('info')
        var barW = 0
        var id = setInterval(function(){
            barW+=2
            porpressBar.style.width = barW + 'px'
            info.innerText = barW/2 + '%'
            if(barW==200){
                clearInterval(id)
            }
        },500)
        
        console.log(screen.availHeight);
        console.log(screen.availWidth);
<div id="box">
        <div id="progressBar"></div>
    </div>
<span id="info">0%</span>
//style
        #box{
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
        #progressBar{
            height: 50px;
            background-color: red;
        }

 

posted @ 2022-08-06 11:31  奇思妙想流川枫  阅读(120)  评论(0)    收藏  举报