lovecoding
/
W250913


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!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>
        .box{
            width: 600px;
            height: 80px;
            border:3px solid black;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }
        .progress{
            width: 0;
            height: 100%;
            background-color: #ff6700;
        }
        .text{
            position: absolute;
            height: 80px;
            line-height: 80px;
            left: 20px;
            top: 0;
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="progress"></div>
        <div class="text">0%</div>
    </div>
    <button>开始</button>
    <script>
        // 获取按钮
        var oBtn = document.getElementsByTagName("button")[0];
        // 获取进度条
        var oProgress = document.getElementsByClassName("progress")[0];
        // 获取文字
        var oText = document.getElementsByClassName("text")[0];


        // 给按钮绑定点击事件
        oBtn.onclick = function(){
            // 获取元素宽度
            var width = oProgress.offsetWidth;
            // 定义数字变量
            var num = 0;

            // 设置定时器
            var timer = setInterval(function(){
                num++;
                width += 6;
                oProgress.style.width = width + "px";
                oText.innerText = num + "%";
                if(width >= 600){
                    clearInterval(timer)
                }
            },16)

        }
    </script>
</body>
</html>