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

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

news 2026/4/2 5:27:10

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

Qwen3-Embedding-4B GPU算力优化：CUDA Stream并发执行向量化与相似度计算，吞吐提升1.8倍

Qwen3-Embedding-4B GPU算力优化&#xff1a;CUDA Stream并发执行向量化与相似度计算&#xff0c;吞吐提升1.8倍 1. 引言&#xff1a;当语义搜索遇上性能瓶颈 想象一下&#xff0c;你正在使用一个智能语义搜索工具&#xff0c;输入“我想吃点东西”&#xff0c;它立刻为你找到…...

编程新知 2026/4/2 5:09:44

DYOR 嘉创地产 02421.HK

文章目录1.公司概况1.1 简介1.2 股权结构1.3 核心资质与定位2.业务布局3.财务与市场表现&#xff1a;业绩承压&#xff0c;规模迷你3.1 业绩大幅下滑3.2 市场表现落后3.3 规模在行业中垫底4.核心优势5.潜在风险与隐忧6.小结参考文献1.公司概况 1.1 简介 嘉创地产是一家脱胎于…...

编程新知 2026/4/2 4:01:07

STM32F4 Flash读写避坑指南：如何安全存储关键数据（附完整代码）

STM32F4 Flash读写避坑指南&#xff1a;如何安全存储关键数据&#xff08;附完整代码&#xff09; 第一次在STM32F4上操作Flash时&#xff0c;我遇到了一个令人抓狂的问题——设备运行几小时后数据莫名其妙丢失。经过三天三夜的调试才发现&#xff0c;原来是在写入前忘记检查扇…...

编程新知 2026/4/2 3:50:33

CDN 无法播放音视频？流媒体回源与 Range 配置修复

流媒体应用现在越来越普及&#xff0c;CDN&#xff08;内容分发网络&#xff09;早已成为音视频流畅播放的核心支撑——靠边缘节点就近分发&#xff0c;既能降低延迟&#xff0c;又能减轻源站压力&#xff0c;让用户不用长时间等待就能看高清内容。但实际运维中&#xff0c;“C…...

编程新知 2026/4/2 3:40:16

论文AIGC全红99%怎么救？2026实测Gemini去痕术：3组指令集联合3大工具，稳稳拉回10%安全线

视角重构&#xff0c;打破“平铺直叙”的机械感 AI生成的最大特征是“正确但平庸的上帝视角”。要ai降ai&#xff0c;第一步不是改词&#xff0c;而是强行植入一个具有批判性的“人类观察者”视角&#xff0c;迫使模型重组叙事逻辑。 核心原理&#xff1a;通过引入“辩证法”…...

编程新知 2026/4/2 1:03:55

01_第一篇：到底什么是嵌入式芯片？与通用CPU_GPU_DSP的核心区别

嵌入式芯片入门&#xff1a;到底什么是嵌入式芯片&#xff1f;与通用CPU/GPU/DSP的核心区别 引言&#xff1a;智能时代的核心基石&#xff0c;嵌入式芯片的无处不在 在万物互联的智能时代&#xff0c;我们的生活早已被无数“隐形大脑”环绕&#xff1a;清晨唤醒你的智能手环、出…...

编程新知 2026/4/2 0:16:52

Infinity Pro书签迁移终极指南：从JSON文件到本地缓存的完整操作流程

Infinity Pro书签迁移终极指南&#xff1a;从JSON文件到本地缓存的完整操作流程 作为一名长期使用Infinity Pro的开发者&#xff0c;我深知书签迁移的痛点。每次换设备或重装系统&#xff0c;那些精心整理的技术资源库都要重新配置。本文将分享一套经过实战验证的迁移方案&…...

编程新知 2026/4/1 23:26:17

3层防护构建个人AI助手： Maid跨平台应用的隐私与体验革新

3层防护构建个人AI助手&#xff1a; Maid跨平台应用的隐私与体验革新 【免费下载链接】maid Maid is a free and open source application for interfacing with llama.cpp models locally, and with Anthropic, DeepSeek, Ollama, Mistral and OpenAI models remotely. 项目…...

编程新知 2026/4/1 23:07:58

宁德时代2026春招开启：6000+offer，这一轮机会在扩大

很多人现在还在犹豫一个问题&#xff1a;新能源是不是已经开始降温了&#xff1f;现在再投&#xff0c;还能不能拿到好的岗位&#xff1f;但从今年的招聘情况来看&#xff0c;趋势其实很清晰&#xff1a;岗位没有减少&#xff0c;而是在结构性增加。尤其是动力电池、储能、电池…...

编程新知 2026/4/1 22:59:45

【计算机视觉实战】第10章 | 单阶段目标检测YOLO与SSD：实时检测的极致追求

欢迎来到《计算机视觉实战》系列教程的第十章。在第九章我们学习了Faster R-CNN等两阶段检测器&#xff0c;它们精度高但速度慢。本章我们将学习单阶段检测器&#xff08;One-stage Detector&#xff09;&#xff0c;特别是YOLO和SSD&#xff0c;它们在保持可观精度的同时实现了…...

编程新知 2026/4/1 22:06:59