当前位置： 首页 > news >正文

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

news 2025/12/25 4:15:01

如何实现一个基于 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>

总结

通过以上步骤，你就可以轻松实现一个带有百分比显示的可点击任务进度条。这个实现相对简单，但在实际项目中，你可以根据需要进一步扩展，比如添加不同的样式、动画效果，甚至是结合 AJAX 更新任务状态。

这个小功能适用于各种任务管理、下载进度或表单步骤的展示，是一个常见且实用的网页 UI 组件。希望这篇教程对你有所帮助！

相关文章：

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

如何实现一个基于 HTMLCSSJS 的任务进度条 在网页开发中&#xff0c;任务进度条是一种常见的 UI 组件&#xff0c;它可以直观地展示任务的完成情况。本文将向你展示如何使用 HTML CSS JavaScript 来创建一个简单的、交互式的任务进度条。用户可以通过点击进度条的任意位置来…...

编程日记 2024/10/8 23:19:12

学会流体力学，冬天洗澡再也不冷啦

前些日子收到一位网友“究极理性怪物”的私信&#xff0c;说最近在学校的公共浴室洗澡时&#xff0c;快被冻死了&#xff0c;希望我从流体力学角度帮他分析一下浴室的温度分布&#xff0c;以便找到相对温暖的洗澡位置。 我看到后觉得很有意思&#xff0c;就与他展开了关于澡堂…...

编程日记 2024/10/8 23:18:10

WPF下使用FreeRedis操作RedisStream实现简单的消息队列

Redis Stream简介 Redis Stream是随着5.0版本发布的一种新的Redis数据类型： 高效消费者组：允许多个消费者组从同一数据流的不同部分消费数据，每个消费者组都能独立地处理消息，这样可以并行处理和提高效率。 阻塞操作：消费者可以设置阻塞操作，这样它们会在流中有新数据…...

编程日记 2024/10/8 23:17:09

踩坑NVTX

最开始在 【简说】NVTX Nsight Nvidia性能分析利器 看到NVTX的时候&#xff0c;我觉得这是一个好东西啊&#xff0c;可以详细说明每一段时间对应的是哪一段程序。 看了一下github&#xff0c;他的文章已经过时&#xff0c;现在已经不需要链接动态库了&#xff0c;直接includ…...

编程日记 2024/10/8 23:15:06

Ubuntu修改IP方法

方法一&#xff1a;通过图形化界面修改IP 打开网络设置&#xff1a; 点击桌面右上角的网络图标&#xff0c;然后选择“设置”或“网络设置”。 选择网络接口&#xff1a; 在网络设置窗口中&#xff0c;选择你正在使用的网络接口&#xff08;有线或无线网络&#xff09;。 进…...

编程日记 2024/10/8 23:14:05

C++——STL简介

目录 一、什么是STL 二、STL的版本 三、STL的六大组件 没用的话..... 不知不觉两个月没写博客了&#xff0c;暑假后期因为学校的事情在忙&#xff0c;开学又在准备学校的java免修&#xff0c;再然后才继续开始学C&#xff0c;然后最近打算继续写博客沉淀一下最近学到的几周…...

编程日记 2024/10/8 23:12:02

[linux] 磁盘清理相关

在 CentOS 7 中清理磁盘空间可以通过多种方法实现&#xff0c;以下是一些常用的步骤和命令&#xff1a; 1. 查找和删除大文件 你可以使用 find 命令查找占用大量空间的文件&#xff1a; find / -type f -size 100M 2>/dev/null这条命令会查找大于 100 MB 的文件。你可以根…...

编程日记 2024/10/8 23:08:59

【笔记】DDD领域驱动设计

同名读书笔记&#xff0c;对于一些自觉重要的点进行记录。 扩展资源&#xff1a;github.com/evancyz/ddd-learning UML中类图的一些基本知识 - jack_Meng - 博客园 最后的第四部分暂时没看 Part Two 模型驱动设计的构造块 Chapter 5 软件中所表示的模型 5.2 模式&#xff1a;…...

编程日记 2024/10/8 23:05:56

用AI构建小程序需要多久？效果如何？

随着移动互联网的快速发展&#xff0c;多端应用的需求日益增长。为了提高开发效率、降低成本并保证用户体验的一致性&#xff0c;前端跨端技术在如今的开发界使用已经非常普遍了&#xff0c;技术界较为常用的跨端技术有小程序技术、HTML5技术两大类。 2023年以来&#xff0c;伴…...

编程日记 2024/10/8 23:03:54

深度学习的应用综述

文章目录 引言深度学习的基本概念深度学习的主要应用领域计算机视觉自然语言处理语音识别强化学习医疗保健金融分析 深度学习应用案例公式1.损失函数(Loss Function) 结论 引言 深度学习是机器学习的一个子领域&#xff0c;通过模拟人脑的神经元结构来处理复杂的数据。近年来&…...

编程日记 2024/10/8 23:00:51

whereis命令：查找命令的路径

一、命令简介 ​whereis​ 命令用于查找命令的&#xff1a;可执行文件、帮助文件和源代码文件。 例如 $ whereis ls ls: /usr/bin/ls /usr/share/man/man1/ls.1.gz找到了 ls 命令的可执行文件、帮助文件的位置。 ‍ 二、命令参数 命令格式 whereis [选项] [命令名称]选项…...

编程日记 2024/10/8 22:58:49

【ECMAScript 从入门到进阶教程】第四部分：项目实践（项目结构与管理，单元测试，最佳实践与开发规范，附录）

第四部分&#xff1a;项目实践 第十四章 项目结构与管理 在构建现代 Web 应用程序时&#xff0c;良好的项目结构和管理是确保代码可维护性、高效开发和部署成功的关键因素。这一章将深入讨论项目初始化与配置&#xff0c;以及如何使用构建工具来简化和优化项目建设过程。 14…...

编程日记 2024/10/8 22:57:48

算法讲解—最小生成树（Kruskal 算法）

算法讲解—最小生成树&#xff08;Kruskal 算法&#xff09; 简介 根据度娘的解释我们可以知道&#xff0c;最小生成树(Minimum Spanning Tree, MST)就是&#xff1a;一个有 n n n 个结点的连通图的生成树是原图的极小连通子图&#xff0c;且包含原图中的所有 n n n 个结点…...

编程日记 2024/10/8 22:53:43

掌握 C# 多线程与异步编程

现代应用程序通常需要执行复杂的计算或处理 I/O 操作&#xff0c;这些操作可能会导致主线程阻塞&#xff0c;从而降低用户体验。C# 提供了多线程与异步编程的多种工具&#xff0c;让我们能够高效地并发处理任务。本文将介绍 C# 中的多线程与异步编程&#xff0c;包括 Thread 类…...

编程日记 2024/10/8 22:51:41

Angular 2 用户输入

Angular 2 用户输入 Angular 2 是一个由 Google 维护的开源前端 web 框架，用于构建单页应用程序（SPA）。它以其高效的双向数据绑定、模块化架构和强大的依赖注入系统而闻名。在 Angular 2 应用程序中，处理用户输入是核心功能之一，因为它允许应用程序响应用户的操作。 Ang…...

编程日记 2024/10/8 22:50:38

线程安全的单例模式 | 可重入 | 线程安全 |死锁（理论）

&#x1f308;个人主页&#xff1a; 南桥几晴秋 &#x1f308;C专栏&#xff1a; 南桥谈C &#x1f308;C语言专栏&#xff1a; C语言学习系列 &#x1f308;Linux学习专栏&#xff1a; 南桥谈Linux &#x1f308;数据结构学习专栏&#xff1a; 数据结构杂谈 &#x1f308;数据…...

编程日记 2024/10/8 22:48:36

解决方案：梯度提升树（Gradient Boosting Trees）跟GBDT（Gradient Boosting Decision Trees）有什么区别

文章目录 一、现象二、解决方案梯度提升树&#xff08;GBT&#xff09;GBDT相同点区别 一、现象 在工作中&#xff0c;在机器学习中&#xff0c;时而会听到梯度提升树&#xff08;Gradient Boosting Trees&#xff09;跟GBDT&#xff08;Gradient Boosting Decision Trees&…...

编程日记 2024/10/8 22:46:34

亚马逊国际商品详情API返回值：电商精准营销的关键

亚马逊国际商品详情API&#xff08;Amazon Product Advertising API&#xff09;为开发者提供了一种获取商品信息的方式&#xff0c;这些信息对于电商精准营销至关重要。通过分析API返回的详细数据&#xff0c;商家可以制定更精准的营销策略&#xff0c;提高用户购买转化率。 …...

编程日记 2024/10/8 22:44:32

python爬虫 - 进阶requests模块

&#x1f308;个人主页&#xff1a;https://blog.csdn.net/2401_86688088?typeblog &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、SSL证书问题 &#xff08;一&#xff09;跳过 SSL 证书验证 &#xff0…...

编程日记 2024/10/8 22:43:30

代码随想录 103. 水流问题

103. 水流问题 #include<bits/stdc.h> using namespace std;void dfs(vector<vector<int>>& mp, vector<vector<int>>& visit, int y, int x){if (visit[y][x] 1) return;visit[y][x] 1;if (y > 0){if (mp[y][x] < mp[y - 1][x…...

编程日记 2024/10/8 22:41:28

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/12/25 2:10:53

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/12/24 3:32:45

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/12/21 8:32:16

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/12/14 22:06:49

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/11/1 8:36:48

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/12/24 12:19:29