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

【web笔记】JavaScript实现有动画效果的进度条

article 2025/6/10 0:10:37

文章目录

1 实现效果
2 实现代码

1 实现效果

在这里插入图片描述

2 实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><style>#progress {width: 300px;height: 20px;border-radius: 0; /* 移除圆角 */-webkit-appearance: none; /* 隐藏默认样式 */appearance: none; /* 隐藏默认样式 */}#progress::-webkit-progress-bar {background-color: #f3f3f3; /* 背景颜色 */border-radius: 0; /* 移除背景圆角 */}#progress::-webkit-progress-value {background-color: #007bff; /* 进度颜色 */border-radius: 0; /* 移除进度圆角 */}#progress::-moz-progress-bar {background-color: #007bff; /* 进度颜色 (Firefox) */}</style>
</head>
<body><progress id="progress" max="100" value="0"></progress> <span id="progressText">0%</span><script>var progressElement = document.getElementById("progress");var progressTextElement = document.getElementById("progressText");var currentValue = 0;var intervalId;function updateProgress() {currentValue++;if (currentValue <= 100) {progressElement.value = currentValue;progressTextElement.textContent = currentValue + '%';} else {// clearInterval(intervalId); // 到100%，清除定时器currentValue = 0; // 重置为0，重新开始progressElement.value = currentValue;progressTextElement.textContent = currentValue + '%';}}// 设置定时器，每隔100毫秒执行一次updateProgress函数intervalId = setInterval(updateProgress, 100);</script></div>
</body>
</html>

【web笔记】JavaScript实现有动画效果的进度条

文章目录 1 实现效果2 实现代码 1 实现效果 2 实现代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><style>#progress {width: 300px;height: 20px;border-radius: 0; /* 移除圆角 */-webkit-appearance…...

编程日记 2025/6/10 0:10:37

安装最新elasticsearch-8.18.2

1.环境我的环境是linux麒麟服务器（安装 es 7.8以上 java环境必须11以上，可以单独配置es的java目录） 2.下载官网的地址：下载 Elastic 产品 | Elastic Download Elasticsearch | Elastic Elasticsearch 入门 | Elasticsearch 中文文档文档 3.我下载的是8.18的 Elasti…...

编程日记 2025/6/10 0:09:35

大数据学习（129）-Hive数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/6/10 0:07:31

React 进阶特性

1. ref ref 是 React 提供的一种机制，用于访问和操作 DOM 元素或 React 组件的实例。它可以用于获取某个 DOM 元素的引用，从而执行一些需要直接操作 DOM 的任务，例如手动设置焦点、选择文本或触发动画。 1.1. 使用 ref 的步骤 1. 创建一个 ref：使用 React.createRef 或 …...

编程日记 2025/6/10 0:06:30

Polarctf2025夏季赛 web java ez_check

第一次自己做出一个java，值得小小的记录，polar的java真得非常友好反编译jar包，一眼就看到有个/deserialize 路由，接受base64的序列化数据，base64解码后经过一次kmp检查，再由SafeObjectInputStream来反序列…...

编程日记 2025/6/10 0:05:28

vue3+el-table 利用插槽自定义数据样式

<el-table-column label"匹配度" prop"baseMatchingLevel"><template #default"scope"><div :style"{ color: scope.row.baseMatchingLevel > 0.8 ? #00B578 : #FA5151 }">{{ scope.row.baseMatchingLevel }}&l…...

编程日记 2025/6/10 0:04:26

跑通 TrackNet-Badminton-Tracking-tensorflow2 项目全记录

📝 跑通 TrackNet-Badminton-Tracking-tensorflow2 项目全记录 git clone https://github.com/Chang-Chia-Chi/TrackNet-Badminton-Tracking-tensorflow2.git TrackNet-Badminton-Tracking-tensorflow2 conda create --prefix /cloud/TrackNet-Badminton-Tracking-…...

编程日记 2025/6/10 0:02:11

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（八）

uboot启动异常及解决网络问题及解决打开STM32CubeMX选中ETH1 - A7NS（Linux）Mode：RGMII（Reduced GMII）勾选ETH 125MHz Clock Input修改GPIO引脚如图所示 Net: No ethernet found.生成代码后，修改u-boot下…...

编程日记 2025/6/10 0:01:08

CodeBuddy一腾讯内部已有超过 85% 的程序员正在使用de编程工具

大家好，我是程序员500佰，目前正在前往独立开发路线，我会在这里分享关于编程技术、独立开发、技术资讯以及编程感悟等内容。如果本文能给你提供启发和帮助，还请留下你的一健三连，给我一些鼓励，谢谢。本文直…...

编程日记 2025/6/10 0:00:05

PHP 表单 - 验证邮件和URL

PHP 表单 - 验证邮件和URL 引言在Web开发中，表单是用户与网站交互的重要途径。一个功能完善的表单不仅可以收集用户数据，还能提高用户体验。在表单设计中，验证邮件地址和URL是常见的需求。本文将详细介绍如何在PHP中实现邮件和URL的验证&a…...

编程日记 2025/6/9 23:59:04

leetcode238-除自身以外数组的乘积

leetcode 238 思路可以在不使用除法的情况下，利用前缀积和后缀积来实现解答前缀积：对每个位置，计算当前数字左侧的所有数字的乘积后缀积：对每个位置，计算当前数字右侧的所有数字的乘积结合这两种思想&#xff0…...

编程日记 2025/6/9 23:58:02

论文阅读笔记——Large Language Models Are Zero-Shot Fuzzers

TitanFuzz 论文深度学习库（TensorFlow 和 Pytorch）中的 bug 对下游任务系统是重要的，保障安全性和有效性。在深度学习（DL）库的模糊测试领域，直接生成满足输入语言(例如 Python )语法/语义和张量计算的DL A…...

编程日记 2025/6/9 23:56:57

matlab模糊控制实现路径规划

路径规划是机器人和自动驾驶系统中的重要问题之一，它涉及确定如何在给定环境中找到最优路径以达到特定目标。模糊控制是一种有效的控制方法，可以应用于路径规划问题。路径规划算法的目标是在避免障碍物的情况下，找到机器人或车辆从起点到终…...

编程日记 2025/6/9 23:55:49

浅谈未来汽车电子电气架构发展趋势中的通信部分

目录一、引入 1.1市场占比演化 1.2未来发展趋势二、纯电动汽车与传统汽车的区别 2.1 纯电车和燃油车的架构（干货） 2.2 新能源汽车的分类 ⚡ 1. 纯电动汽车（BEV） 🔋 2. 插电式混合动力（PHEV&#…...

编程日记 2025/6/9 23:54:45

基于 Transformer robert的情感分类任务实践总结之二——R-Drop

基于 Transformer robert的情感分类任务实践总结之一核心改进点 1. R-Drop正则化原理：通过在同一个输入上两次前向传播（利用Dropout的随机性），强制模型对相同输入生成相似的输出分布，避免过拟合。实现&#xff1a…...

编程日记 2025/6/9 23:53:40

个人电脑部署本地大模型+UI

在这个AI飞速进步的时代，越来越多的大模型出现在市面上本地大模型也越来越火爆！ 它完全免费，随时可以访问，数据仅存在本地，还可以自己微调，训练！ 今天我来教大家，如何在一台普通…...

编程日记 2025/6/9 23:52:38

Three.js + Vue3 加载GLB模型项目代码详解

本说明结合 src/App.vue 代码，详细解释如何在 Vue3 项目中用 three.js 加载并显示 glb 模型。 1. 依赖与插件导入 import {onMounted, onUnmounted } from vue import * as THREE from three import Stats from stats.js import {OrbitControls } from three/examples/jsm/co…...

编程日记 2025/6/9 23:51:32

MongoDB $type 操作符详解

MongoDB $type 操作符详解引言 MongoDB 是一款流行的开源文档型数据库，它提供了丰富的查询操作符来满足不同的数据查询需求。在 MongoDB 中，$type 操作符是一个非常有用的查询操作符，它允许用户根据文档中字段的类型来查询文档。本文将详细介绍 MongoDB 的 $type 操作符，…...

编程日记 2025/6/9 23:50:28

Vue3项目实现WPS文件预览和内容回填功能

技术方案背景：根据项目需要，要实现在线查看、在线编辑文档，并且进行内容的快速回填，根据这一项目背景，最终采用WPS的API来实现，接下来我们一起来实现项目功能。 1.首先需要先准备好测试使用的文档&#xf…...

编程日记 2025/6/9 23:49:26

PySide6 GUI 学习笔记——常用类及控件使用方法（多行文本控件QTextEdit）

文章目录 PySide6.QtWidgets.QTextEdit 应用举例概述核心特性常用方法文本内容操作光标和选择操作格式和样式查找功能视图控制状态设置常用信号代码示例示例说明1. 基本设置2. 文本格式化功能3. 功能按钮4. 信号处理 PySide6.QtWidgets.QTextEdit 应用举例概述 QTextEdit 是…...

编程日记 2025/6/9 23:48:23

【版本控制】Git 和 GitHub 入门教程

目录 0 引言1 Git与GitHub的诞生1.1 Git：Linus的“两周奇迹”，拯救Linux内核1.2 GitHub：为Git插上协作的翅膀1.3 协同进化：从工具到生态的质变1.4 关键历程时间轴（2005–2008） 2 Git与GitHub入门指南2.1 Gi…...

编程日记 2025/6/9 23:47:19

上位机知识篇---Flask框架实现Web服务

本文将简单介绍Web 服务与前端显示部分，它们基于Flask 框架和HTML/CSS/JavaScript实现，主要负责将实时视频流和检测结果通过网页展示，并提供交互式状态监控。以下是详细技术解析： 一、Flask Web 服务架构 1. 核心路由设计 app.…...

编程日记 2025/6/9 23:46:17

django paramiko 跳转登录

在使用Django框架结合Paramiko进行SSH远程操作时，通常涉及到自动化脚本的执行，比如远程服务器上的命令执行、文件传输等。如果你的需求是“跳转登录”，即在登录远程服务器后，再通过该服务器的SSH连接跳转到另一台服务器&#xff0…...

编程日记 2025/6/9 23:45:15

Prompt工程学习之思维树（TOT）

思维树定义：思维树（Tree of Thoughts, ToT） 是一种先进的推理框架，它通过同时探索多条推理路径对思维链（Chain of Thought）** 进行了扩展。该技术将问题解决视为一个搜索过程 —— 模型生成不同的中间步骤…...

编程日记 2025/6/9 23:44:13

基于python大数据的水文数据分析可视化系统

博主介绍：高级开发，从事互联网行业六年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了多年的设计程序开发，开发过上千套设计程序，没有什么华丽的语言，只有实实在…...

编程日记 2025/6/9 23:43:08

人工智能学习09-变量作用域

人工智能学习概述—快手视频人工智能学习09-变量作用域—快手视频...

编程日记 2025/6/9 23:41:58

DJango知识-模型类

一.项目创建在想要将项目创键的目录下,输入cmd (进入命令提示符)在cmd中输入:Django-admin startproject 项目名称 (创建项目)cd 项目名称 (进入项目)Django-admin startapp 程序名称 (创建程序)python manage.py runserver 8080 (运行程序)将弹出的网址复制到浏览器中…...

编程日记 2025/6/9 23:40:56

结构性-代理模式

动态代理主要是为了处理重复创建模板代码的场景。使用示例 public interface MyInterface {String doSomething(); }public class MyInterfaceImpl implements MyInterface{Overridepublic String doSomething() {return "接口方法dosomething";} }public class M…...

编程日记 2025/6/9 23:39:54

【Redis】笔记｜第10节｜京东HotKey实现多级缓存架构

缓存架构京东HotKey架构代码结构代码详情功能点：（如代码有错误，欢迎讨论纠正） 多级缓存，先查HotKey缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新…...

编程日记 2025/6/9 23:38:52

Java中Git基础操作详解（clone、commit、push、branch）

Git是Java开发者必备的版本控制工具，以下是核心操作的详细说明及示例： 一、Git基础概念仓库（Repository）：存储代码的目录，包含所有版本历史。提交（Commit）…...

编程日记 2025/6/9 23:37:51

文章目录

1 实现效果

2 实现代码

相关文章：