用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端产品更…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发，数据库mysql，前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别：不同层级的事件处理 方…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗？ 在ComfyUI中实现图生视频并延长到5秒，需要结合多个扩展和技巧。以下是完整解决方案： 核心工作流配置（24fps下5秒120帧） #mermaid-svg-yP…...