用js+css实现圆环型的进度条——js+css基础积累
如果用js+css实现圆环型的进度条：
直接上代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>环形进度条</title></head><body><div class="percent"><svg style="transform: rotate(-90deg)"><circle cx="50" cy="50" r="50" /><circle id="circle" cx="50" cy="50" r="50" style="stroke: red" /></svg><div class="num"><h2><span id="per">0</span><span>%</span></h2></div></div><div class="percent"><svg style="transform: rotate(-90deg)"><circle cx="50" cy="50" r="50" /><circle id="circle2" cx="50" cy="50" r="50" style="stroke: #f90" /></svg><div class="num"><h2><span id="per2">0</span><span>%</span></h2></div></div><div class="percent"><svg style="transform: rotate(-90deg)"><circle cx="50" cy="50" r="50" /><circle id="circle3" cx="50" cy="50" r="50" style="stroke: #67c23a" /></svg><div class="num"><h2><span id="per3">0</span><span>%</span></h2></div></div></body><style>body {height: 100vh;display: flex;justify-content: center;align-items: center;margin: 0;}.percent {position: relative;width: 110px;height: 110px;}.percent svg {width: 110px;height: 110px;}.percent svg circle {fill: none;stroke-width: 10;stroke: #1258e3;transform: translate(5px, 5px);/* 设置虚线长度 = 圆的周长（2*50*3.1415926） */stroke-dasharray: 310;/* 设置圆的空白间隙 */stroke-dashoffset: 310;}.percent svg circle:nth-child(1) {stroke-dashoffset: 0;stroke: #f3f3f3;}.percent svg circle:nth-child(2) {stroke-dashoffset: calc(310 - 310 * (0 / 100));stroke-linecap: round;}.percent .num {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}#per {font-size: 22px;}</style><script>circleRender(document.querySelector('#circle'),document.querySelector('#per'),50);circleRender(document.querySelector('#circle2'),document.querySelector('#per2'),10);circleRender(document.querySelector('#circle3'),document.querySelector('#per3'),95);function circleRender(circle, per, percent) {let num = 0;const timer = setInterval(() => {num += 1;if (num > percent) {num = percent;clearInterval(timer);blo = false;}// 设置进度circle.style.strokeDashoffset = `calc(310 - 310*(${num}/100))`;per.innerHTML = num;}, 100);}</script>
</html>相关文章：
用js+css实现圆环型的进度条——js+css基础积累
如果用jscss实现圆环型的进度条： 直接上代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><met…...
TDengine 与北微传感达成合作，解决传统数据库性能瓶颈
在当今物联网（IoT）快速发展的背景下，传感器技术已成为各个行业数字化转型的关键组成部分。随着设备数量的激增和数据生成速度的加快，如何高效地管理和分析这些数据，成为企业实现智能化运营的重要挑战。尤其是在惯性传感…...
通过Python爬虫获取商品销量数据，轻松掌握市场动态
为什么选择Python爬虫？ 简洁易用：Python语言具有简洁的语法和丰富的库，使得编写爬虫变得简单高效。强大的库支持：Python拥有强大的爬虫框架（如Scrapy、BeautifulSoup、Requests等），可以快速实现…...
学习虚幻C++开发日志——TSet
TSet 官方文档：虚幻引擎中的Set容器 | 虚幻引擎 5.5 文档 | Epic Developer Community (epicgames.com) TSet 是通过对元素求值的可覆盖函数，使用数据值本身作为键，而不是将数据值与独立的键相关联。 默认情况下，TSet 不支持重…...
)
面向对象进阶（下）(JAVA笔记第二十二期)
p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解 目录 抽象方法和抽象类抽象方法定义格式抽象类定义格式抽象方法和抽象类注意事项 接口接口的定义接口中成员变量的特点接口中没有构造方法接口中成员方法的特点在接口中定义具有方法体…...
通信协议——UART
目录 基础概念串行&并行串行的优缺点 单工&双工 UART基本概念时序图思考：接收方如何确定01和0011 基础概念 串行&并行 串行为8车道，并行为1车道 串行的优缺点 通行速度快浪费资源布线复杂线与线之间存在干扰 单工&双工 单工…...
-谱加权)
最优阵列处理技术(七)-谱加权
阵列的加权技术等价于时间序列谱分析中的加窗或锐化技术。在加权过程中，需要考虑的是如何降低旁瓣并使主波束宽度的增长最小。 首先需要明确的是，在 u u u空间下的波束方向图为 B u ( u ) =...
Java | Leetcode Java题解之第486题预测赢家
题目： 题解： class Solution {public boolean PredictTheWinner(int[] nums) {int length nums.length;int[] dp new int[length];for (int i 0; i < length; i) {dp[i] nums[i];}for (int i length - 2; i > 0; i--) {for (int j i 1; j …...
leetcode动态规划（十五）-完全背包
题目 leetcode上没有纯完全背包题目，可以看卡码网上的题目 完全背包 思路 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]，得到的价值是value[i] 。每件物品都有无限个（也就是可以放入背包多次）ÿ…...
AI视听新体验！浙大阿里提出视频到音乐生成模型MuVi:可解决语义对齐和节奏同步问题
MuVi旨在解决视频到音乐生成(V2M)中的语义对齐和节奏同步问题。 MuVi通过专门设计的视觉适配器分析视频内容,以提取上下文 和时间相关的特征,这些特征用于生成与视频的情感、主题及其节奏和节拍相匹配的音乐。MuVi在音频质量和时间同步方面表现优于现有基线方法,并展示了其在风…...
对比两个el-table，差异数据突显标记
前言 在数据分析和数据处理的过程中，经常需要对比两个数据集，以便发现其中的差异和变化。本文将介绍如何使用 el-table 组件来对比两个数据集，并通过差异数据的突显标记，帮助用户更直观地理解数据的变化。 cell-style 属性 其实利…...
调研funasr时间戳返回时间坐标效果可用性
# 背景 ： 分析funasr识别结果中每个中文字的时间戳偏差情况 1.评价指标： ①偏差公式： A=标注字的时间戳（帧长区间） B=识别字的时间戳（帧长区间） 偏差=（AB的区间并集-AB的区间交际） 偏差百分比=（AB的区间并集-AB的区间交际）/（A的帧长） def calculate_bias(la…...
Tomcat默认配置整理
Connector: 处理请求的具体配置 Tomcat的连接等待队列长度，默认是100 Tomcat的最大连接数，默认是8192 Tomcat的最小工作线程数，默认是10 Tomcat的最大线程数，默认是200 Tomcat的连接超时时间，默认是20s Server port…...
深入理解Rust中的指针：裸指针 智能指针
Rust是一种注重安全性的系统编程语言，它通过所有权、借用和生命周期等机制来保证内存安全。在Rust中，指针的使用是小心翼翼的，因为指针操作是导致内存错误的主要原因之一。然而，指针在处理底层数据和性能优化时又是必不可少的。本…...
物联网实训项目：绿色家居套件
1、基本介绍 绿色家居通过物联网技术将家中的各种设备连接到一起，提供家电控制、照明控制、电话远程控制、室内外遥控、防盗报警、环境监测、暖通控制、红外转发以及可编程定时控制等多种功能和手段。绿色家居提供全方位的信息交互功能，甚至为各种能源费…...
缓存雪崩是什么
背景 Redis的缓存雪崩是指在某一时间段内，大量缓存数据同时失效，导致大量请求直接打到数据库上，造成数据库压力激增，甚至可能导致数据库宕机。这种情况类似于雪崩效应，突然的大量请求涌入数据库，系统无法承…...
【格物刊】龙信刊物已上新
文章关键词：电子数据取证、电子物证、手机取证、介质取证 深藏注册表的秘密：一次揭开金融阴谋的成功取证 一场看似无懈可击的金融操作，背后是否隐藏着阴谋？执法部门接到举报，指控几名金融机构的高层管理人员涉嫌利用…...
DNA存储介绍
1. DNA存储的基本原理 DNA存储技术基于DNA分子的双螺旋结构，利用其四种碱基（A、T、C、G）来编码信息。每个碱基可以代表一个二进制位（bit），其中A和C可以代表0，G和T可以代表1，或者使用…...
如何修改MAC地址破解网络无线网络限制-担心别人蹭网，路由器设置MAC地址过滤，限定了能访问无线网络的网卡地址-供大家学习参考
路由器都设置了MAC地址过滤，也就是限定了能访问无线网络的网卡的MAC地址。因为无线路由器不一定由自己控制，所以当更换了笔记本或者更换了无线网卡的时候，也许就上不了网了。我们可以修改网卡的MAC地址实现上网。 下载：https://do…...
C端产品经理与B端产品经理的区别
一：需求量级不一样 C端是面向消费者，吃的是人口红利，可能与社会大环境关系比较大，C端一般中大厂的需求多 B端是面向公司，吃的是产业红利，B端产品经理无论什么规模的公司都需要。 二：B端产品更…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）
CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】，分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）
cd /home 进入home盘 安装虚拟环境： 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境： virtualenv myenv 3、激活虚拟环境（激活环境可以在当前环境下安装包） source myenv/bin/activate 此时，终端…...