如何实现一个基于 HTML+CSS+JS 的任务进度条

最新推荐文章于 2024-10-08 22:29:57 发布

OEC小胖胖

最新推荐文章于 2024-10-08 22:29:57 发布

阅读量653

点赞数 8

本文链接：https://blog.csdn.net/2301_79858914/article/details/142769144

版权

如何实现一个基于 HTML+CSS+JS 的任务进度条

在网页开发中，任务进度条是一种常见的 UI 组件，它可以直观地展示任务的完成情况。本文将向你展示如何使用 HTML + CSS + JavaScript 来创建一个简单的、交互式的任务进度条。用户可以通过点击进度条的任意位置来更新进度，并且进度条会同步显示百分比。

效果演示

用户点击进度条任意位置时，进度条会自动填充到该位置，进度百分比会动态显示在下方。
在这里插入图片描述

实现步骤

1. HTML 结构

首先，我们需要定义进度条的基本结构。进度条由一个容器元素 progress-bar 和一个表示进度的填充条 progress-fill 组成。还有一个 progress-text 元素用于显示当前的百分比。

<div class="progress-container">
    <div class="progress-bar" id="progressBar">
        <div class="progress-fill" id="progressFill"></div>
    </div>
    <div class="progress-text" id="progressText">进度: 0%</div>
</div>

2. CSS 样式

接下来，为进度条和百分比文字设置样式。我们使用 CSS 来设置进度条的尺寸、颜色和外观。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.progress-container {
    width: 80%;
    max-width: 600px;
}

.progress-bar {
    width: 100%;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    width: 0;
    height: 100%;
    background-color: #4caf50;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.progress-text {
    margin-top: 10px;
    font-size: 18px;
    text-align: center;
}

progress-bar: 这是一个灰色的容器，表示整个进度条的背景。
progress-fill: 绿色填充条，表示任务完成的部分。
progress-text: 显示当前进度百分比，并位于进度条下方。

3. JavaScript 实现点击事件

最后，我们使用 JavaScript 来实现交互功能。用户点击进度条时，我们会获取鼠标点击的位置，并将其转换为百分比值，然后更新进度条和显示的百分比。

const progressBar = document.getElementById('progressBar');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');

// 监听进度条的点击事件
progressBar.addEventListener('click', function(event) {
    // 获取进度条的宽度
    const barWidth = progressBar.offsetWidth;
    // 获取鼠标点击位置相对于进度条的坐标
    const clickX = event.offsetX;
    // 计算点击位置对应的百分比
    const percentage = Math.round((clickX / barWidth) * 100);

    // 更新进度条的宽度和文本
    progressFill.style.width = percentage + '%';
    progressText.textContent = '进度: ' + percentage + '%';
});

offsetX: 获取用户点击的位置。
barWidth: 获取进度条的总宽度。
通过计算点击位置与总宽度的比例，我们可以得到用户点击位置对应的百分比，然后用该百分比更新进度条和文本。

4. 完整代码

将 HTML、CSS 和 JavaScript 代码整合在一起，如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务进度条</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .progress-container {
            width: 80%;
            max-width: 600px;
        }

        .progress-bar {
            width: 100%;
            height: 30px;
            background-color: #e0e0e0;
            border-radius: 5px;
            position: relative;
            cursor: pointer;
        }

        .progress-fill {
            width: 0;
            height: 100%;
            background-color: #4caf50;
            border-radius: 5px;
            transition: width 0.3s ease;
        }

        .progress-text {
            margin-top: 10px;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
        <div class="progress-text" id="progressText">进度: 0%</div>
    </div>

    <script>
        const progressBar = document.getElementById('progressBar');
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');

        // 监听进度条的点击事件
        progressBar.addEventListener('click', function(event) {
            // 获取进度条的宽度
            const barWidth = progressBar.offsetWidth;
            // 获取鼠标点击位置相对于进度条的坐标
            const clickX = event.offsetX;
            // 计算点击位置对应的百分比
            const percentage = Math.round((clickX / barWidth) * 100);

            // 更新进度条的宽度和文本
            progressFill.style.width = percentage + '%';
            progressText.textContent = '进度: ' + percentage + '%';
        });
    </script>
</body>
</html>