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

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

news 2026/5/21 19:30:03

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

Prism Launcher：重新定义你的Minecraft启动体验

Prism Launcher&#xff1a;重新定义你的Minecraft启动体验 【免费下载链接】PrismLauncher A custom launcher for Minecraft that allows you to easily manage multiple installations of Minecraft at once (Fork of MultiMC) 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/5/21 18:40:54

发现FinalBurn Neo：解锁经典街机游戏的终极模拟方案

发现FinalBurn Neo&#xff1a;解锁经典街机游戏的终极模拟方案 【免费下载链接】FBNeo FinalBurn Neo - We are Team FBNeo. 项目地址: https://gitcode.com/gh_mirrors/fb/FBNeo 你是否曾想重温那些定义了游戏黄金时代的经典街机游戏&#xff0c;却苦于找不到合适的平…...

编程新知 2026/5/21 18:16:07

别再手动写RAM/ROM了！用Xilinx Block Memory Generator IP核的5个实战技巧（附Vivado仿真代码）

别再手动写RAM/ROM了&#xff01;用Xilinx Block Memory Generator IP核的5个实战技巧&#xff08;附Vivado仿真代码&#xff09; 在FPGA开发中&#xff0c;存储器模块的设计往往占据大量时间。许多工程师习惯手动编写RTL代码实现RAM/ROM功能&#xff0c;却忽略了Xilinx提供的B…...

编程新知 2026/5/21 17:58:32

C++11、C++14、C++17、C++20常用新特性

C11自动类型推断&#xff08;auto关键字&#xff09;&#xff1a;C11引入了auto关键字&#xff0c;可以根据变量初始值自动推导出变量类型。例如&#xff1a;12auto i 42; // i被推导为int类型auto d 3.14; // d被推导为double类型基于范围的for循环&#xff08;range-base…...

编程新知 2026/5/21 17:58:29

2026黑科技对决：UWB硬件瓶颈 vs 镜像视界无感定位・跨镜追踪自由

2026黑科技对决&#xff1a;UWB硬件瓶颈 vs 镜像视界无感定位・跨镜追踪自由 一、UWB&#xff1a;厘米级精度&#xff0c;困在硬件里的“昂贵精准” UWB&#xff08;超宽带&#xff09;凭借短脉冲、宽频谱特性&#xff0c;在理想视距环境下可实现5–10厘米定位精度&#xff0…...

编程新知 2026/5/21 16:36:12

长期使用 Taotoken Token Plan 套餐在成本控制方面的实际感受

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 长期使用 Taotoken Token Plan 套餐在成本控制方面的实际感受 1. 从按需付费到计划订阅的转变 最初接触 Taotoken 时&#xff0c;…...

编程新知 2026/5/21 16:26:07

5分钟快速上手：如何为Windows安装程序添加简体中文界面支持

5分钟快速上手&#xff1a;如何为Windows安装程序添加简体中文界面支持 【免费下载链接】Inno-Setup-Chinese-Simplified-Translation :earth_asia: Inno Setup Chinese Simplified Translation 项目地址: https://gitcode.com/gh_mirrors/in/Inno-Setup-Chinese-Simplified-…...

编程新知 2026/5/21 16:02:58

10分钟终极指南：使用Chronos时间序列预测模型快速上手

10分钟终极指南&#xff1a;使用Chronos时间序列预测模型快速上手 【免费下载链接】chronos-forecasting Chronos: Pretrained Models for Time Series Forecasting 项目地址: https://gitcode.com/GitHub_Trending/ch/chronos-forecasting 想要在几分钟内完成专业级的时…...

编程新知 2026/5/21 15:33:34

OpenClaw Windows一键部署包简体中文版下载

OpenClaw&#xff08;小龙虾&#xff09;Windows 一键部署保姆级教程 | 10分钟养出你的数字员工&#xff08;2026最新版&#xff09; 前言&#xff1a;2026年爆火的开源AI智能体OpenClaw&#xff08;昵称小龙虾&#xff09;&#xff0c;GitHub星标超28万&#xff0c;凭“本地运…...

编程新知 2026/5/21 15:27:19

协议转换网关与数据采集网关的区别与差异

摘要在工业自动化、物联网、智能建筑等领域中&#xff0c;“协议转换”和“数据采集网关”是两个常被提及但容易混淆的概念。它们虽有关联&#xff0c;却扮演着不同的角色。理解其核心差异对于构建高效、可靠的数据通信系统至关重要。1.核心定义&#xff1a;本质差异1.1协议转换…...

编程新知 2026/5/21 13:38:25