JavaScript 进度条|极客笔记

JavaScript 进度条

在网页开发中，进度条是一个常见的元素，它用来显示任务的完成进度，提供给用户一个可视化的反馈。在本文中，我们将使用 JavaScript 来实现一个简单的进度条，并通过一些示例代码来演示其用法。

实现思路

实现一个进度条的基本思路是：创建一个 HTML 元素代表进度条，使用 JavaScript 控制该元素的宽度来显示完成进度。具体步骤如下：

创建一个 HTML 元素作为进度条的外框。
在 CSS 中定义进度条的样式，如背景颜色、高度等。
使用 JavaScript 控制进度条的宽度，根据完成进度动态改变宽度值。

示例代码

下面是一个简单的示例代码，实现一个基本的进度条效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar</title>
<style>
    #progress {
        width: 0%;
        height: 30px;
        background-color: #4CAF50;
        text-align: center;
        color: white;
    }
</style>
</head>
<body>
    <div id="progress"></div>

    <script>
        const progress = document.getElementById('progress');

        let width = 0;
        const interval = setInterval(() => {
            width += 10;
            progress.style.width = width + '%';
            progress.innerHTML = width + '%';

            if (width >= 100) {
                clearInterval(interval);
            }
        }, 1000);
    </script>
</body>
</html>

在上面的代码中，我们通过 HTML 创建了一个 div 元素作为进度条，通过 CSS 设置了进度条的样式。然后使用 JavaScript 控制了该进度条的宽度，每秒增加 10% 直到达到 100%。