使用 JavaScript 实现的进度条更新的函数。使用 JavaScript 实现的进度条更新的函数。使用 JavaS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蓝斑JavaScript训练场</title>
</head>
<style>
    .progress {
        width: 0%;
        height: 10px;
        background: linear-gradient(to bottom right, #0000ff, #ffffff , #0000ff,#ffffff,#0000ff);
        position: relative;
        border-radius:20px;
        transition: width .3s linear;
    }
</style>
<body>
<div id="">
    <div class="progress" id="myDiv"></div>

</div>
</body>
</html>
<script>
    function updateProgress() {
        setTimeout(() => {
            var div = document.getElementById("myDiv");
            var currentWidth = parseInt(div.style.width) || 0;
            var targetWidth = currentWidth + 5;
            var maxWidth = 100;
            if (targetWidth <= maxWidth) {
                div.style.width = targetWidth + "%";
                div.innerHTML = targetWidth + "%";
                requestAnimationFrame(updateProgress);
            }
        },200)
    }

    requestAnimationFrame(updateProgress);

</script>