JavaScript实现简单的进度条效果

效果图：

简单说一下思路：
主要就是进度条的宽度的动态调整！要用到JS的间隔定时器 setInterval( )

setInterval( )

功能：每隔指定时间调用一次函数
参数：函数，时间间隔
返回值：定时器编号（数字）

想让它到一定的宽度就停止，那么需要设定它的最大宽度，在它外面套一个有宽度的元素就可以啦！这样的话控制它在父元素里的百分比就行了。
在函数里进行判断是否道达指定宽度，没有到达就增长，否则就停止。
为了便于理解，后面JS代码中也有注释

1.HTML结构

        <div id="box">  
            <p id="progress"></p>  //不断增长的进度条
            <span id=n>0%</span>  //百分比的显示
        </div>
        <button id="btn">开 始</button>   //按钮

2.CSS样式

<style>
        #box{
            width: 500px;
            height: 30px;
            border: black 2px solid;
            position: relative;
        }
        #progress{
            width: 0px;
            height: 30px;
            background: pink;
            
        }
        #btn{
            width: 50px;
            height: 30px;
        }
        #n{
            position: absolute;
            top: 5px;
            right: 0;
        }
    </style>

重点来啦！

3.JavaScript代码

<script>
        //通过id获取元素
        var progress = document.getElementById('progress')
        var n = document.getElementById('n')
        var btn = document.getElementById('btn')

        //定义函数，并用元素的单击事件触发函数
        btn.onclick = function(){
            var w = 0  //定义变量，用来存储进度条的长度

            //启动定时器
            var t = setInterval(function(){
                w += 10   //每隔指定时间，让进度条长度增加10
                if(w >= 100){   //判断进度条的长度有没有等于或大于指定长度
                    w = 100     
                    clearInterval(t)    //条件成立，清除定时器
                }
                progress.style.width = w + '%'   //给元素赋值变化后的宽度
                n.innerHTML = w + '%'    //同时百分比也要增长
            },100)   //每隔0.1秒执行一次
        }
    </script>

这是我的学习记录，分享给大家
也希望对看到这篇博文的你有帮助！！！
加油！冲鸭！