用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端产品更…...
书生营 L0G4000 玩转HF/魔搭/魔乐社区
模型下载 在codespace上给环境装包，按照教材即可 运行后下载成功 建立下载json文件 新建下载internlm2_5-chat-1_8b的json文件 运行结果 基本上没啥问题，照着教程来就行 模型上传（可选） push的时候需要先认证token 最后的…...
轻松检测麦克风功能：使用Python的sounddevice和soundfile库
轻松检测麦克风功能：使用Python的sounddevice和soundfile库 在进行音频处理或开发需要使用麦克风的应用程序时，确保麦克风功能正常是非常重要的。本文将介绍一个简单的Python脚本，它能够帮助我们检测本地麦克风的功能，确保我们的设…...
k8s 部署步骤整理（containerd）
版本：v1.31 容器运行时：containerd 网络插件：flannel 系统：Ubuntu22.04 安装部署步骤 安装containerd sudo apt-get update sudo apt-get install ca-certificates curl sudo install -m 0755 -d /etc/apt/keyrings sudo curl …...
Swagge详解，SpringBoot项目集成Swagger
介绍 相信无论是前端还是后端开发，都或多或少地被接口文档折磨过。前端经常抱怨后端给的接口文档与实际情况不一致。后端又觉得编写及维护接口文档会耗费不少精力，经常来不及更新。其实无论是前端调用后端，还是后端调用后端，都期望…...
docker搭建etcd集群环境方式
docker搭建etcd集群环境方式 from: etcd 虚拟机与docker搭建etcd集群环境方式_docker部署etcd集群-CSDN博客 windows系统下 1: “\”要换成：“^” 2: 不能在windows powershell下执行...
重装ubuntu系统后配置
零、我的电脑硬件 1、购买型号 2021年12月25日在京东下单 7196元 联想拯救者15.6英寸 R7000P 2021游戏本 2、运行内存 内存 16 3、显卡型号 GPU nvidia RTX 3050Ti 4GB 一、安装终端 虽然自带的有，但是更方便 sudo apt install terminator 二、两个系统…...
Java基于数据库的分布式可重入锁（带等待时间和过期时间）
文章目录 技术背景介绍代码实现数据库表结构尝试获取锁续约阻塞式获取锁解锁检查锁是否过期或者释放 使用示例优化方案 项目代码 技术背景介绍 一般分布式锁使用最方便的就是使用redis实现，因为他自带超时过期机制、发布订阅模式、高吞吐高性能的优势，…...
国家信息安全水平考试（NISP一级）最新题库-第十七章
目录 另外免费为大家准备了刷题小程序和docx文档，有需要的可以私信获取 1 受到了ARP欺骗的计算机，发出的数据包， 地址是错误的（） A.源IP；B.目的IP；C.源MAC；D.目的MAC 正…...
Java 8 新特性概览
Java 8 是 Java 语言发展史上的一个重要里程碑，它引入了许多革命性的特性，极大地提高了开发效率和程序性能。以下是 Java 8 的一些关键新特性： 1. Lambda 表达式 Lambda 表达式是 Java 8 中最引人注目的特性之一。它允许你以简洁的语法编写…...
pyspark==堆叠
安装环境 docker pull jupyter/all-spark-notebook 方式一 from pyspark.sql import SparkSession from pyspark.sql.functions import expr, col# 创建SparkSession spark SparkSession.builder.appName("StudentScores").getOrCreate()# 创建示例数据 data [(…...
天猫秘券网站怎么做/常见的网络营销工具有哪些
本文分享产品经理入门到进阶7套课，带大家开始产品经理学习。理论知识和学习路线参考上图，另外文末有晋升思维导图哦! 一、快速了解产品经理行业 这个阶段对于不了解产品经理这个岗位，没有接触过相关工作的同学来说，重点在于了解…...
曰本真人性做爰无码视频网站/职业培训机构有哪些
一、借车别人车出事的话车主会有连带责任吗 1.《民法典》第一千二百零九条 【机动车所有人、管理人与使用人不一致时的侵权责任】因租赁、借用等情形机动车所有人、管理人与使用人不是同一人时，发生交通事故造成损害，属于该机动车一方责任的࿰…...
廊坊网站排名优化价格/网络市场营销
Pairs C标准程序库中凡是“必须返回两个值”的函数， 也都会利用pair对象 classpair可以将两个值视为一个单元。容器类别map和multimap就是使用pairs来管理其健值/实值(key/value)的成对元素。 pair被定义为struct,因此可直接存取pair中的个别值.两个pairs互相比较时…...
网站建设经验典型/广东深圳疫情最新消息
2019独角兽企业重金招聘Python工程师标准>>> http://wangheng.org/raspberry-dht11-yeekink.html 转载于:https://my.oschina.net/u/2477353/blog/633981...
wordpress seo by yoast下载/网站建设高端公司
【1】项目 》 属性 》 C/C 》 常规 》 多处理器编译 【2】工具》选项》项目和解决方案》VC项目设置》最大并发C编译数...
专题制作 wordpress/推广公司好做吗
最近面试中出现频率比较高的字符串和列表的去重pstr abcadcf# 字符串去重# 1、使用集合 --没有保持原来的顺序 print(set(pstr)) # 2、使用字典 -- 没有保持原来的顺序 print({}.fromkeys(pstr).keys()) # 3、使用循环遍历法 -- 代码不够简洁，不高端 a [] for i i…...