jquery 进度条显示俩个值

原创

mob64ca12f4d1ad 2024-10-05 06:33:40 ©著作权

文章标签 进度条 jQuery HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f4d1ad的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 实现进度条显示两个值

在开发中，进度条是一个常用的视觉元素，用于表示某项操作的进度。例如，我们可以在一个文件上传或数据处理的场景中看到进度条。今天我将教你如何使用 jQuery 实现一个进度条，显示两个不同的值，分别表示当前进度和总进度。下面是整个流程的概述。

实现流程

步骤	说明
1	创建 HTML 基础结构
2	引入 jQuery 库
3	编写 CSS 样式
4	编写 jQuery 脚本逻辑
5	测试进度条功能

第一步：创建 HTML 基础结构

我们需要先创建一个简单的 HTML 页面。在页面中，我们将包含一个进度条和相应的显示文字。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条示例</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入 CSS 样式 -->
    <script src=" <!-- 引入 jQuery 库 -->
</head>
<body>
    <div id="progress-container">
        <div id="progress-bar"></div>
        <div id="progress-text">0/100</div> <!-- 显示进度的文字 -->
    </div>
    <button id="start-btn">开始</button> <!-- 开始按钮 -->
    <script src="script.js"></script> <!-- 引入 JavaScript 脚本 -->
</body>
</html>

第二步：编写 CSS 样式

接下来，我们需要设置进度条的样式。

/* styles.css */
#progress-container {
    width: 100%;
    background: #e0e0e0;
    border: 1px solid #ccc;
    position: relative;
    height: 30px;
}

#progress-bar {
    height: 100%;
    width: 0;
    background: green;
    text-align: center;
    line-height: 30px; /* 垂直居中 */
    color: white; /* 文本颜色 */
}

#progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px; /* 垂直居中 */
}

第三步：编写 jQuery 脚本逻辑

最后，我们编写 jQuery 代码来处理进度条的逻辑。

// script.js
$(document).ready(function() {
    $("#start-btn").click(function() {
        let total = 100; // 总进度
        let current = 0; // 当前进度
        
        // 创建一个定时器，每100ms更新一次进度条
        let interval = setInterval(function() {
            if (current >= total) {
                clearInterval(interval); // 完成后清除定时器
            } else {
                current++; // 增加当前进度
                let progress = (current / total) * 100; // 计算进度百分比
                $("#progress-bar").width(progress + "%"); // 更新进度条宽度
                $("#progress-text").text(current + "/" + total); // 更新进度文字
            }
        }, 100);
    });
});

测试效果

当点击“开始”按钮时，进度条将逐渐填充，并每次更新文本显示当前进度和总进度。这种交互效果提升了用户体验。

饼状图和甘特图示例

以下是一个饼状图的示例，用于展示不同的进度状态：

pie
    title 进度状态
    "未开始": 50
    "进行中": 30
    "已完成": 20

接下来是一个简单的甘特图，展示不同任务的进度和时间安排：

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    section 任务
    任务 A       :a1, 2023-10-01, 30d
    任务 B       :after a1  , 20d
    任务 C       : 2023-10-15  , 12d