lovecoding
/
W250511


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress{
            width: 500px;
            height: 50px;
            border:3px solid black;
            border-radius: 10px;
            line-height: 50px;
            padding-left: 50px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }
        .progress-bg{
            width: 0;
            height: 100%;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .progress-num{
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="progress">
        <span class="progress-num">0%</span>
        <div class="progress-bg"></div>
    </div>
    <button>开始</button>
    <script>
        // 第一步获取元素
        // 获取按钮
        var progressBtn = document.getElementsByTagName("button");
        progressBtn = progressBtn[0];
        // 获取进度条
        var progressBg = document.getElementsByClassName("progress-bg");
        progressBg = progressBg[0];
        // 获取进度条文字
        var progressNum = document.getElementsByClassName("progress-num");
        progressNum = progressNum[0];
        //用来存储定时器
        var timer = null;
        // 定义变量存储进度数字
        var num = 0;

        // 第二步为按钮绑定事件
        progressBtn.onclick = function(){
            // 通过offsetWidth 获取元素宽度
            var thisWidth = progressBg.offsetWidth;
            // 设置一个定时函数实现动画过度效果
            timer = setInterval(function(){
                thisWidth += 5;
                num++
                if(thisWidth <= 500){
                    progressBg.style.width = thisWidth + "px";
                    progressNum.innerText = num + "%";
                }else{
                    clearInterval(timer);
                }
                

                // progressBg.style.width = (thisWidth + 10) + "px";
            },16);
        }
    </script>
</body>
</html>