用js+css实现圆环型的进度条——js+css基础积累

news2024/11/26 2:26:17

如果用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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2223297.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通信协议——UART

目录 基础概念串行&并行串行的优缺点 单工&双工 UART基本概念时序图思考&#xff1a;接收方如何确定01和0011 基础概念 串行&并行 串行为8车道&#xff0c;并行为1车道 串行的优缺点 通行速度快浪费资源布线复杂线与线之间存在干扰 单工&双工 单工&#xf…

vite脚手架中安装和按需引入vuetify

最近想尝试以下vuetify&#xff0c;然后根据chatgpt的引导安装上了&#xff0c;但是谁知道呢&#xff0c;最后打包后的项目&#xff08;里面什么都没写&#xff0c;只是一个vuetify测试页面&#xff09;大小已经超过了5mb&#xff0c;然后我找了很多资料&#xff0c;最终学会了…

【LeetCode】1297、子串的最大出现次数

【LeetCode】1297、子串的最大出现次数 文章目录 一、定长滑动窗口1.1 定长滑动窗口 二、多语言解法 一、定长滑动窗口 1.1 定长滑动窗口 参考 本题, 只需要 考虑 minSize, 而不需要考虑 maxSize 以例1为例: s “aababcaab”, maxLetters 2, minSize 3, maxSize 4 结论: …

[Linux网络编程]05-TCP状态和端口复用,shutdown函数(主动方建立/关闭连接状态,被动方建立/关闭连接状态,2MSL时长,TCP其他状态)

一.TCP状态图表示 netstat -apn | grep client 查看客户端网络连接状态 netstat -apn | grep port 查看端口的网络连接状态 二.主动方&#xff0c;被动方TCP连接状态 1. 主动发起连接请求端&#xff1a; CLOSE – 发送SYN – SEND_SYN – 接收 ACK、SYN – SEND_SYN – 发送 A…

关于VSCode 一运行终端显示一行以后就剩光标的情况

在配置VSCode C的时候&#xff0c;我发现我每次点击运行&#xff0c;终端那显示&#xff1a; 终端被任务重用&#xff0c;按任意键关闭。 然后&#xff0c;后面终端就什么都没有了剩下一个终端在那里瑟瑟发抖&#xff1a; 然后紧接着弹出一个框&#xff1a; 这段说实话&…

Cursor零基础小白教程系列「技巧」 - Cursor 白嫖方案

最适合小白零基础的Cursor教程 网站lookai.top相同作者&#xff0c;最新文章会在网站更新&#xff0c;欢迎收藏书签 Cursor 白嫖方案 - 低调行事 Cursor简介及定价 前面我们提到了cursor 账户有三种性质 Hobby&#xff1a;免费计划&#xff0c;包括两周 Pro 试用期、每月 200…

室内地图制作-电子地图管理系统源代码公开-室内地图 开源-SDK调用指南(二)

一、室内外电子地图可视化制图项目需求 室内外地图开发需满足开发者可以在Android、iOs、web应用中加入地图相关的功能&#xff0c;包括&#xff1a;地图展示、地图交互、在地图上绘制路线、POI点、搜索、AR导航、蓝牙点位、离线地图等功能。 在开源室内地图编辑-电子地图管理…

003:无人机概述

摘要&#xff1a;本文介绍无人机的定义和分类、无人机系统定义、民用无人机驾驶员分类和应用领域。 一、无人机的定义和分类 1.无人机定义 无人机是一种能够在无人驾驶的条件下完成复杂空中飞行任务和各种负载任务的飞行器&#xff0c;可以被视为“空中机器人”。它利用先进的…

在3D Slicer中使用 Monai Bundle 和 Model Zoo 标注医学影像数据-分割肾子结构:皮质髓质和集合系统

文章持续更新&#xff0c;可以关注微公【医学图像人工智能实战营】获取最新动态。人手有限&#xff0c;文中涉及的链接前往微公对应文章查看。关注Tina姐&#xff0c;一起学习进步~ 在3D Slicer中使用 Monai Bundle 和 Model Zoo 标注医学影像数据-分割肾子结构&#xff1a;皮质…

git安装-Tortoise git 安装汉化教程

1. 安装git 2. 安装git图形化工具Tortoise git 3. 汉化 Tortoise git 汉化安装包

架构师知识梳理(十):系统架构设计与评估

架构基本概念 软件架构&#xff1a;从需求分析到软件设计之间的过渡过程称为软件架构&#xff0c;软件架构为软件系统提供了一个结构、行为和属性的高级抽象&#xff0c;由构件的描述、构件的相互作用&#xff08;连接件&#xff09;、指导构件集成的模式以及这些模式的约束组成…

iOS 18.2 可让欧盟用户删除App Store、Safari、信息、相机和照片应用

升级到 iOS 18.2 之后&#xff0c;欧盟的 iPhone 用户可以完全删除一些核心应用程序&#xff0c;包括 App Store、Safari、信息、相机和 Photos 。苹果在 8 月份表示&#xff0c;计划对其在欧盟的数字市场法案合规性进行更多修改&#xff0c;其中一项更新包括欧盟用户删除系统应…

WebGL编程指南 - 高级变换与动画基础

学习使用一个矩阵变换库&#xff0c;该库封装了矩阵运算的数学细节。快速上手使用该矩阵库&#xff0c;对图形进行复合变换。在该矩阵库的帮助下&#xff0c;实现简单的动画效果。 矩阵变换库&#xff1a;cuon-matrix.js OpenGL中的函数&#xff1a; 书中 cuon-matrix.js 函数…

华为配置BFD状态与接口状态联动实验

组网图形 图1 配置BFD状态与接口状态联动组网图 BFD简介配置注意事项组网需求配置思路操作步骤配置文件 BFD简介 为了减小设备故障对业务的影响&#xff0c;提高网络的可靠性&#xff0c;网络设备需要能够尽快检测到与相邻设备间的通信故障&#xff0c;以便及时采取措施&…

机器学习中的图像处理与计算机视觉

引言 在现代计算机科学中&#xff0c;图像处理和计算机视觉已成为最活跃的研究领域之一&#xff0c;这得益于机器学习和深度学习的发展。本文将深入探讨图像处理与计算机视觉的基础概念、常见应用、关键技术、常用工具&#xff0c;以及在这些领域中的代码示例。通过本篇文章&a…

pytorch 交叉熵损失函数 BCELoss

BCE Loss 交叉熵损失函数计算公式&#xff1a; BCE Loss - 1/n*(y_actual * log(y_pred) (1 - y_actual) * log(1 - y_pred)) t[i]为标签值&#xff1a;0或者1 o[i]是经过sigmoid后的概率值 BCEWithLogitsLoss 这个损失将Sigmoid层和BCELoss合并在一个类中。 BCEWithLog…

OSPF特殊区域及其他特性

不用的链路这状态信息没必要一直保存&#xff0c;要不路由器承受不了。用OSPF 特殊区域解决 1. Stub区域和Totally Stub区域 R1作为ASBR引入多个外部网段&#xff0c;如果Area 2是普通区域&#xff0c;则R3将向该区域注入5类和4类LSA。 当把Area 2配置为Stub区域后&#xff1a…

Qt项目实战:汉中转拼音(大写字母,首字母)

目录 一.汉字转换 1.加载拼音数据 2.初始化简拼数组 3.汉字转换拼音 4.汉字转简拼 5.首字母 二.效果 1.汉字转拼音 2.汉字转简拼 3.首字母 三.代码 1.h 2.cpp 汉字转拼音的小程序不仅在教育和日常生活中发挥着重要作用&#xff0c;还促进了跨文化交流与信息传播。…

【ubuntu18.04】ubuntu18.04安装vmware-tools之后立即适应窗口为灰色,窗口不会自适应

问题描述 ubuntu18.04安装vmware-tools 点击查看&#xff0c;看到立即适应窗口为灰色 解决方案 关闭虚拟机 编辑此虚拟机 设置 注意 取消勾选拉伸模式 查看可以看到所有选项可选择 注意&#xff1a; 不要全屏的时候查看&#xff0c;全屏看到的立即适应窗口就会显示…

Web,RESTful API 在微服务中的作用是什么?

大家好&#xff0c;我是锋哥。今天分享关于【Web&#xff0c;RESTful API 在微服务中的作用是什么&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; Web&#xff0c;RESTful API 在微服务中的作用是什么&#xff1f; 在微服务架构中&#xff0c;Web 和 RESTful …