html 进度条

作者：我在坚强也需要有人疼发布日期:2026-06-13 浏览:99

<!DOCTYPE html>
<html>
<head>
    <title>HTML 进度条示例</title>
    <style>
        /* 设置进度条的样式 */
        .progress-bar {
            width: 100%;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
        }

        .progress {
            height: 30px;
            width: 0;
            background-color: #4caf50;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<h2>HTML 进度条示例</h2>

<div class="progress-bar">
    <div id="myProgress" class="progress">0%</div>
</div>

<button onclick="move()">点击开始进度条</button>

<script>
    // JavaScript 代码用于控制进度条的进度
    function move() {
        var elem = document.getElementById("myProgress");
        var width = 0;
        var id = setInterval(frame, 10);

        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
                elem.innerHTML = width * 1 + '%';
            }
        }
    }
</script>

</body>
</html>

解释说明：

HTML 结构:
- 使用了一个 div 元素作为进度条容器（.progress-bar），并在其中嵌套了另一个 div 元素（.progress）来表示实际的进度。
CSS 样式:
- .progress-bar 设置了宽度、背景颜色、边框和圆角等样式，确保进度条看起来美观。
- .progress 初始宽度为 0%，并设置了背景颜色、文本居中对齐以及文字颜色。
JavaScript 功能:
- move() 函数通过 setInterval 每 10 毫秒更新一次进度条的宽度，直到达到 100%。
- 每次更新时，进度条的文字内容也会相应地显示当前的百分比。

上一篇：如何查看网页的html代码

下一篇：span在html是什么意思