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

纯css实现环形进度条

news 来源：原创 2025/8/27 20:45:05

需要在中实现一个定制化的环形进度条，最终效果如图：

使用代码

 <divclass="circular-progress":style="{'--progress': nextProgress,'--color': endSliderColor,'--size': isFull ? '60rpx' : '90rpx',}"><div class="inner-content"><img:class="isFull ? 'next_btn_full' : 'next_btn_normal'":src="`${assetsHost}dsplayer/next.png`"alt=""/></div></div>

css代码：

/* 内层遮罩实现环形效果 */
.circular-progress::before {content: "";position: absolute;width: 80%;height: 80%;background: rgba(0, 0, 0, 1);border-radius: 50%;
}.inner-content {position: relative;z-index: 1;font-size: 1.2em;color: var(--color);
}/* 兼容方案（可选） */
@supports not (background: conic-gradient(#000, #fff)) {.circular-progress {background: var(--bg-color);}.circular-progress::after {content: "";position: absolute;width: 100%;height: 100%;border-radius: 50%;clip: rect(0, var(--size), var(--size), calc(var(--size) / 2));background: var(--color);transform: rotate(calc(var(--progress) * 3.6deg));}
}

纯css实现环形进度条

需要在中实现一个定制化的环形进度条，最终效果如图： 使用代码 <divclass"circular-progress":style"{--progress: nextProgress,--color: endSliderColor,--size: isFull ? 60rpx : 90rpx,}"><div class"inner-conte…...

编程日记 2025/8/27 20:45:05

链接 A. 日历我的： #include<bits/stdc.h> using namespace std; int n,d[105],ans; bool check(int x,int y){if(x<10){if(y<10){return xy;}else{return xy%10&&xy/10;}}else{if(y<10){return yx%10&&yx/10;}else{return y/10…...

编程日记 2025/8/21 4:48:40

某碰瓷国赛美赛，号称第三赛事的数模竞赛

首先我非常不能理解的就是怎么好意思自称第三赛事的呢？下面我们进行一个简单讨论，当然这里不对国赛和美赛进行讨论。首先我们来明确一点，比赛的含金量由什么来定？这个可能大家的评价指标可能不唯一，我通过DeepSeek选取…...

编程日记 2025/8/21 2:42:47

希象传屏下载

2025年4月5日，11~22℃ 免费软件，功能：手机、个人笔记本和智慧黑板可以双向控制。要求在同一网络下或者同一WiFi下。目的：自己下载的时候比较方便。 1、希沃易官网 2、如何下载？ 被投屏：接收端&#xff1…...

编程日记 2025/8/17 22:28:57

解决 PDF 难题：批量处理、文档清理与自由拆分合并

软件介绍在日常办公与学习中，处理 PDF 文件常常让人头疼不已，不过别担心，今天有一款堪称神器的国产老牌 PDF 工具要分享给大家。它就是 PDF 补丁丁，凭借其强大功能，为大家排忧解难。界面体验初次打开 PDF 补丁丁&…...

编程日记 2025/8/24 17:47:08

SQL Server 2022 数据同步到 Elasticsearch 思考

公司的老项目了，采用的是sqlserver 2022作为数据卡做的，但是产品对接客户，发现对搜索的要求很高，尤其是全文检索，考虑到ES采用倒排所以效率上的优势和整体开发的成本，大佬们商量之后，果断的采用…...

编程日记 2025/8/25 20:02:53

基于Spark的哔哩哔哩舆情数据分析系统

【Spark】基于Spark的哔哩哔哩舆情数据分析系统 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介本项目基于Python和Django框架进行开发，为了便于广大用户针对舆情进行个性化分析处…...

编程日记 2025/8/26 15:50:30

分布式事务解决方案全解析：从经典模式到现代实践

前言在分布式系统中，数据一致性是一个核心问题。随着微服务架构的普及，跨服务、跨数据库的操作变得越来越普遍，如何保证这些操作的原子性、一致性、隔离性和持久性（ACID）成为了一个极具挑战性的任务。本文将全面介绍…...

编程日记 2025/8/27 9:28:13

迈向未来：数字化工厂管理如何重塑生产力

迈向未来：数字化工厂管理如何重塑生产力随着工业4.0的浪潮席卷全球，“数字化工厂管理”成为制造业转型的关键一步。从传统生产模式到数据驱动的智能制造，企业在追求生产效率、质量与灵活性方面实现了飞跃式发展。然而，实施数字化管理不仅仅是技术问题，更关乎流程优化、数…...

编程日记 2025/8/23 3:51:48

LeetCode 1863.找出所有子集的异或总和再求和

题解根据上述图可以根据二进制运算获取所有的子集，但是可以使用二进制获取所有子集需要有题目的这一句话才能够使用注意：在本题中，元素相同的不同子集应多次计数。也就是对于{2,2,3,4,5}的子集不会简化成{2,3,4,5} public static int sub…...

编程日记 2025/8/27 3:54:51

蓝桥云客---蓝桥速算

3.蓝桥速算【算法赛】 - 蓝桥云课问题描述蓝桥杯大赛最近新增了一项娱乐比赛——口算大赛，目的是测试选手的口算能力。比赛规则如下： 初始给定一个长度为 N 的数组 A，其中第 i 个数字为 Ai。随后数组会被隐藏，并进行 Q 次…...

编程日记 2025/8/22 22:26:44

Kafka 概念

🌀 Kafka 是什么？ Kafka 是一个分布式流处理平台，可以用来： 🚚 高效地收集、传输、存储、处理实时数据流。它最初由 LinkedIn 开发，用于解决海量日志处理的问题，后来开源给 Apache&#xff0…...

编程日记 2025/8/23 2:08:39

双向链表增删改查的模拟实现

本章目标 0.双向链表的基本结构 1.双向链表的初始化 2.头插尾插 3.头删尾删 4.查找与打印 5.在指定位置之前插入数据/在指定位置之后插入数据 6.在指定位置之前删除数据/在指定位置之后删除数据 7.销毁链表 0.双向链表的基本结构本章所实现的双向链表是双向循环带头链表,是…...

编程日记 2025/8/24 21:19:41

配置ASP.NET Core+NLog配置日志示例

以下是一个精简且实用的 NLog 配置文件示例，适用于 ASP.NET Core 项目，包含文件日志、控制台日志和自动归档功能： NLog.config 示例‌ (保存到项目根目录) xml Copy Code <?xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http:…...

编程日记 2025/8/26 22:52:46

Roo Code使用MCP服务（大模型上下文协议）

MCP概念火爆，但是理解起来有点难度，使用起来也有点难度。启用MCP RooCode直接支持使用MCP服务，甚至可以帮助写MCP，为我们提供了很大的方便。单击 Roo Code 窗格顶部导航栏中的类似三个插座的图标，显示如下MCP的配置…...

编程日记 2025/8/22 23:46:28

【项目管理】第一部分信息技术 1/2

相关文档，希望互相学习，共同进步风123456789～-CSDN博客概要知识点： 现代化基础设施、数字经济、工业互联网、车联网、智能制造、智慧城市、数字政府、5G、常用数据库类型、数据仓库、信息安全、网络安全态势感知、物联网、大数…...

编程日记 2025/8/24 18:14:45

《UNIX网络编程卷1：套接字联网API》第6章 IO复用：select和poll函数

《UNIX网络编程卷1：套接字联网API》第6章 I/O复用：select和poll函数 6.1 I/O复用的核心价值与适用场景 I/O复用是高并发网络编程的基石，允许单个进程/线程同时监控多个文件描述符（套接字）的状态变化，从而高…...

编程日记 2025/8/26 19:36:05

Three.js 系列专题 1：入门与基础

什么是 Three.js？ Three.js 是一个基于 WebGL 的 JavaScript 库，它简化了 3D 图形编程，让开发者无需深入了解底层 WebGL API 就能创建复杂的 3D 场景。它广泛应用于网页游戏、可视化、虚拟现实等领域。学习目标理解 Three.js 的核心组件：场景（Scene）、相机（Camera）…...

编程日记 2025/8/27 11:01:30

Qt框架深度解析：核心技术、应用场景与实战指南

Qt（发音同“cute”）是一个跨平台的C应用程序开发框架，广泛用于开发图形用户界面（GUI）程序，但也支持非GUI的后台服务、命令行工具等。它由挪威的Trolltech公司于1995年推出，后由诺基亚、Digia等公…...

编程日记 2025/8/22 14:30:43

低代码开发平台：飞帆中的控件中转区

低代码开发平台：飞帆中的控件中转区的作用当控件因为尺寸太大难以拖到 div 框中时，可以先拖到控件中转区中，此时控件会变成一个标签，然后将这个标签拖到 div 框中即可。飞帆 fvi.cn...

编程日记 2025/8/19 20:53:54

基于STM32的智能门禁系统设计与实现

一、项目背景与功能概述在物联网技术快速发展的今天，传统门锁正在向智能化方向演进。本系统基于STM32F103C8T6微控制器，整合多种外设模块，实现了一个具备以下核心功能的智能门禁系统： 密码输入与验证（4x3矩阵键盘&a…...

编程日记 2025/8/22 18:33:11

maven项目打包jar给其他项目pom外部引用

maven项目打包jar给其他项目pom外部引用在现实开发过程中，很多代码需要被重复利用的，但是代码量又是很多，这样的代码可以提出出来作为公共代码或者叫做工具使用，通常这样的工具会以jar包的形式被其他项目pom引入使用。第一步创…...

编程日记 2025/8/23 11:41:11

Linux线程

一、线程的使用线程创建函数原型及头文件 #include <pthread.h> int pthread_create(pthread_t *restrict tidp, const pthread_attr_t *restrict attr, void *(*start_rtn)(void *), void *restrict arg); 参数： tidp：当pthread_create成功…...

编程日记 2025/8/26 15:50:22

Keepalive+LVS+Nginx+NFS高可用项目

项目架构分析主机规划主机系统安装应用网络IPclientredhat 9.5无NAT172.25.250.115/24lvs-masterrocky 9.5ipvsadm，keepalivedNAT172.25.250.116/24 VIP 172.25.250.100/32lvs-backuprocky 9.5ipvsadm，keepalivedNAT172.25.250.117/24 VIP 172.25.2…...

编程日记 2025/8/19 20:23:54

在线编辑数学公式

参考工具： https://www.processon.com/mathtype https://www.latexlive.com/ 一、简单好用的数学公式编辑工具推荐 1. MathType / AxMath • 特点：专业公式编辑软件，支持与Word、WPS等办公软件无缝集成，提供丰富的数学符号和模…...

编程日记 2025/8/26 18:16:51

【spring Cloud Netflix】OpenFeign组件

1.概述 Feign旨在使编写Java Http客户端变得更容易。前面在使用RibbonRestTemplate进行服务的远程调用时，利用RestTemplate对Http请求的封装处理，形成了一套模板化的调用方法。但是在实际开发中，由于对服务的依赖调用可不止一处&#xff0…...

编程日记 2025/8/22 18:55:47

基于Flask的Windows命令大全Web应用技术解析与架构设计

基于Flask的Windows命令大全Web应用技术解析与架构设计引言 Windows命令行工具是系统管理和开发调试的核心技能之一。然而，许多用户对常用命令的用法和场景并不熟悉。本文通过一个基于Flask框架开发的Web应用，系统性地整理了50个Windows命令的用法&…...

编程日记 2025/8/27 3:32:11

Qt中左侧项目菜单中构建设置功能中的构建步骤是怎么回事

在 Qt Creator 中，**构建设置（Build Settings）下的构建步骤（Build Steps）**是控制项目如何编译、链接和生成最终产物的核心配置区域。它允许你自定义编译过程中的各个阶段（如 qmake、make、cmake 等命令的具…...

编程日记 2025/8/17 18:30:01

（一）从零开始：用 LangChain 和 ZhipuAI 搭建简单对话

最近一直在研究如何用 LangChain 和 ZhipuAI 搭建一个智能对话系统，发现这个组合真的非常强大，而且实现起来并不复杂。今天就来分享一下我的学习过程和一些心得体会，希望能帮到同样在探索这个领域的小伙伴们。一、环境搭建：从零…...

编程日记 2025/8/23 1:38:28

Java大厂面试题 -- JVM 优化进阶之路：从原理到实战的深度剖析（2）

最近佳作推荐： Java大厂面试题 – 深度揭秘 JVM 优化：六道面试题与行业巨头实战解析（1）（New） 开源架构与人工智能的融合：开启技术新纪元（New） 开源架构的自动化测试策略优…...

编程日记 2025/8/24 9:57:59

C++ 标准库参考手册深度解析

C 标准库参考手册是每个 C 开发者的必备工具。本文将系统性解析其架构设计、核心功能及实战应用技巧，帮助开发者构建高效的知识检索与代码开发工作流，涵盖从语法查询到编译器适配的全流程技术细节。一、网站架构与技术细节 1. 信息组织体系 1.1 层级化…...

编程日记 2025/8/17 23:23:24

单片机学习笔记8.定时器

IAP15W4K58S4定时/计数器结构工作原理定时器工作方式控制寄存器TMOD 不能进行位寻址，只能对整个寄存器进行赋值寄存器地址D7D6D5D4D3D2D1D0复位值TMOD89HGATEC/(T低电平有效)M1M0GATEC/(T低电平有效)M1M000000000B D0-D3为T0控制，D4-D7为T1控制 GAT…...

编程日记 2025/8/27 14:18:14

神经网络入门：生动解读机器学习的“神经元”

神经网络作为机器学习中的核心算法之一，其灵感来源于生物神经系统。在本文中，我们将带领大家手把手学习神经网络的基本原理、结构和训练过程，并通过详细的 Python 代码实例让理论与实践紧密结合。无论你是编程新手还是机器学习爱好者&#xf…...

编程日记 2025/8/26 21:53:31

2025-04-05 吴恩达机器学习5——逻辑回归(2)：过拟合与正则化

文章目录 1 过拟合1.1 过拟合问题1.2 解决过拟合 2 正则化2.1 正则化代价函数2.2 线性回归的正则化2.3 逻辑回归的正则化 1 过拟合 1.1 过拟合问题欠拟合（Underfitting） 模型过于简单，无法捕捉数据中的模式，导致训练误差和测试误…...

编程日记 2025/8/24 8:54:40

美团滑块分析

声明本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向过程距离识别不准简单学习一下&…...

编程日记 2025/8/26 13:21:09

C++ atomic 原子操作

一、原子操作简介在多线程编程中，通常我们需要多个线程共享数据。但如果不加以控制，多个线程同时访问同一数据，可能会导致数据不一致或竞争条件（race conditions）。为了解决这个问题，我们引入了原子操作…...

编程日记 2025/8/25 9:26:59

Leetcode - 双周赛153

目录一、3498. 字符串的反转度二、3499. 操作后最大活跃区段数 I三、3500. 将数组分割为子数组的最小代价四、3501. 操作后最大活跃区段数 II 一、3498. 字符串的反转度题目连接本题直接模拟，代码如下： class Solution {public int reverseDegree(…...

编程日记 2025/8/24 16:06:40

25.4 GLM-4+RAG智能标注实战：标注成本暴降60%，检索准确率飙升40%！

使用 GLM-4 优化 RAG 程序：智能标注提升检索质量关键词：GLM-4 数据标注, RAG 优化, 检索增强生成, 向量数据库, 语义关联度分析 1. RAG 数据标注的核心挑战在检索增强生成（Retrieval-Augmented Generation）系统中，检索数据的标注质量直接影响最终生成效果。传统标注方…...

编程日记 2025/8/19 14:38:19

基于sklearn实现文本摘要思考

和各位小伙伴分享一下使用sklearn进行文本摘要的思考。第一版本原理提取式文本摘要的基本原理是： 将文本分割成句子计算每个句子的重要性(权重) 选择权重最高的几个句子组成摘要常用的句子权重计算方法： TF-IDF：基于词频-逆文档频…...

编程日记 2025/8/23 23:52:54

Cortex-M3 NVIC可以控制异常向量表的哪些部分

Cortex-M3 的 NVIC（嵌套向量中断控制器）不直接控制整个异常向量表，但可以管理向量表中与中断相关的部分行为。以下是 NVIC 对异常向量表的具体控制范围和相关机制： 1. NVIC 直接控制的部分 NVIC 主要管理外部中断（IRQ）和部分系统异常的行为，但对向量表本身的存储位…...

编程日记 2025/8/23 4:02:09

AI朝代应避免AI幻觉：分析与应对策略

随着人工智能（AI）技术的不断发展，AI的应用领域已经涵盖了文本生成、图像与视频创作以及程序编写等多个方面。然而，AI的生成能力并非没有缺陷，其中最为显著的之一就是所谓的“AI幻觉”（AI hallucination&…...

编程日记 2025/8/26 15:40:58

网络传输H.264方法对比

一、引言网络传输H.264有多种方法，包括但不限于：1.通过RTP直接传输H.264；2.通过UDP传输TS流；3.通过RTP传输TS流；4.通过RTP传输PS流。本文对这些方法进行对比。二、通过RTP直接传输H.264 这种方案就是RTP包&#xf…...

编程日记 2025/8/26 7:56:46

第九章:可靠通信_《凤凰架构：构建可靠的大型分布式系统》

第九章可靠通信一、零信任网络模型核心难点：理解安全模型从传统边界防护到动态信任验证的转变零信任的核心原则不再区分"内部可信网络"与"外部不可信网络"（传统防火墙模型失效）每次请求都需要进行身份验证和授权…...

编程日记 2025/8/27 6:18:06

HeidiSQL：多数据库管理工具

HeidiSQL 是一款广受欢迎的免费开源数据库管理工具，专为数据库管理员及开发者设计。无论您是刚接触数据库领域的新手，还是需要同时处理多种数据库系统的专业开发者，该工具都能凭借其直观的界面和强大的功能，助您轻松完成数据管理任…...

编程日记 2025/8/24 7:37:22

文件系统-inode/软硬件连接（未完结）

首先我们了解一下文件简洁理解来说就是：文件内容文件属性 ---> 磁盘上存储的文件存文件的内容存文件的属性；而文件的内容----存放在每个数据块 ；文件属性存放在iNode里面。要明白：linux系统中的文件是存储在磁盘中的&#xf…...

编程日记 2025/8/27 1:26:26

数据库并发控制问题

并发控制问题是数据库管理系统（DBMS）中处理多个事务并发执行时，确保数据一致性、可靠性和完整性的一系列技术和挑战。并发控制问题通常与事务的隔离性和事务之间的相互影响有关。以下是并发控制中主要的几种问题及其解决方式的详细解释&#…...

编程日记 2025/8/23 23:02:18

（五）智能体与工具协同——打造智能对话的超级助手

上一篇：（四）数据检索与增强生成——让对话系统更智能、更高效在前四个阶段，我们已经搭建了一个功能强大的智能对话，并深入探讨了输入输出处理、链式工作流构建和数据检索与增强生成的细节。现在，我们将进…...

编程日记 2025/8/24 19:12:16

第十三届蓝桥杯 2022 省 B 刷题统计

题目描述小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a a a 道题目，周六和周日每天做 b b b 道题目。请你帮小明计算，按照计划他将在第几天实现做题数大于等于 n n n 题? 输入格式输入一行包含三个整数 a , b a, b a,b 和 n n n. 输出格…...

编程日记 2025/8/24 4:46:05

NLP/大模型八股专栏结构解析

1.transformer 结构相关 （1）transformer的基本结构有哪些，分别的作用是什么，代码实现。 NLP高频面试题（一）——Transformer的基本结构、作用和代码实现 （2）LSTM、GRU和Transformer结…...

编程日记 2025/8/24 16:39:24

不在 qtdesigner中提升，进行主题程序设计

以下是无需在Qt Designer中提升控件的完整主题化方案，保持现有代码结构的同时实现动态阴影效果管理： 一、增强主题管理器（支持动态控件发现） // thememanager.h #pragma once #include <QObject> #include <QSet> #…...

编程日记 2025/8/26 14:55:37

相关文章：