css - - - - - 环形倒计时进度条实现

news2024/11/14 15:44:47

css - - - - - 环形倒计时进度条实现

  • 1. 效果图展示
  • 2. 代码展示

1. 效果图展示

在这里插入图片描述

在这里插入图片描述

2. 代码展示

// html
<view class="father">
  <view class="progress" style="--progress:{{red}}; --last:{{gray}}">
  </view>
</view>




// css
.father {
  padding: 50px;
}

.progress {
  width: 32rpx;
  height: 32rpx;
  background: conic-gradient(#E51717 0% var(--progress), #D9D9D9 var(--progress) 100%);
  border-radius: 50%;
  position: relative;
}

.progress::before {
  content: "";
  position: absolute;
  inset: 6rpx;
  background-color: #fff;
  width: 20rpx;
  height: 20rpx;
  text-align: center;
  line-height: 24rpx;
  border-radius: 50%;
}



// js
Page({
  data: {
    time: 30,
    red: '100%',
    gray: "0%",
  },
  onLoad() {
    const _this = this;
    setInterval(() => {
      let times = _this.data.time == 1 ? 30 : --_this.data.time;
      let redCycle = (3.33 * times).toFixed(2); // 保留两位小数
      _this.setData({
        time: times,
        red: `${redCycle}%`,
        gray: `${(100 - redCycle).toFixed(2)}%` // 保留两位小数
      })
    }, 1 * 1000);
  },
});

【参考地址】

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

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

相关文章

【区块链 + 智慧政务】澳门:智慧城市建设之证书电子化项目 | FISCO BCOS应用案例

2019 年 2 月 27 日&#xff0c;澳门政府设立的澳门科学技术发展基金与微众银行达成合作&#xff0c;通过区块链、人工智能、大数据、 云计算等创新技术&#xff0c;共同推进澳门特区的智慧城市建设与未来型城市发展&#xff0c;提升粤港澳大湾区的科创能力。在澳 门智慧城市建…

从零开始学量化~Ptrade使用教程(六)——盘后定价交易、港股通与债券通用质押式回购

盘后固定价交易 实现科创板、创业板的盘后固定价交易&#xff0c;界面如下显示&#xff1a; 交易 输入科创板或创业板代码&#xff0c;选择委托方向&#xff0c;输入委托价格、委托数量&#xff0c;点击“买入”或“卖出”按钮进行委托。可出现一个委托提示框提示是否继续委托操…

防火墙NAT地址转换和智能选举综合实验

一、实验拓扑 目录 一、实验拓扑 二、实验要求&#xff08;接上一个实验要求后&#xff09; 三、实验步骤 3.1办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 3.2分公司设备可以通过总公司的移动链路和电信链路访…

使用GPT3.5,LangChain,FAISS和python构建一个本地知识库

引言 介绍本地知识库的概念和用途 在现代信息时代&#xff0c;我们面临着海量的数据和信息&#xff0c;如何有效地管理和利用这些信息成为一项重要的任务。本地知识库是一种基于本地存储的知识管理系统&#xff0c;旨在帮助用户收集、组织和检索大量的知识和信息。它允许用户…

html5——CSS列表样式属性

list-style-type list-style-image list-style-position list-style eg&#xff1a; li { list-style:none; }【去除前面的黑点】

深度解析:disableHostCheck: true引发的安全迷局与解决之道

在Web开发的浩瀚星空中&#xff0c;开发者们时常会遇到各种配置与调优的挑战&#xff0c;其中disableHostCheck: true这一选项&#xff0c;在提升开发效率的同时&#xff0c;也悄然埋下了安全隐患的伏笔。本文将深入探讨这一配置背后的原理、为何会引发报错&#xff0c;以及如何…

Linux下如何安装配置Graylog日志管理工具

Graylog是一个开源的日志管理工具&#xff0c;可以帮助我们收集、存储和分析大量的日志数据。它提供了强大的搜索、过滤和可视化功能&#xff0c;可以帮助我们轻松地监控系统和应用程序的运行情况。 在Linux系统下安装和配置Graylog主要包括以下几个步骤&#xff1a; 准备安装…

TCP与UDP的理解

文章目录 UDP协议UDP协议的特点UDP的应用以及杂项 TCP协议TCP协议段格式解释和TCP过程详解确认应答机制 -- 序号和确认序号以及6位标志位中的ACK超时重传机制连接管理机制 与标志位SYN,FIN,ACK滑动窗口流量控制拥塞控制延迟应答捎带应答和面向字节流粘包问题TCP异常情况TCP特点…

华为USG6000V防火墙NAT智能选举

目录 一、拓扑图 二、要求 三、配置思路及方法 要求1&#xff1a;通过多对多的NAT实现上网功能 思路&#xff1a;基础IP地址配置按照之前的进行配置&#xff0c;接着在策略里配置多对多的NAT 要求2&#xff1a;分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的…

单链表算法 - 链表的回文结构

链表的回文结构_牛客题霸_牛客网对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为。题目来自【牛客题霸】https://www.nowcoder.com/practice/d281619e4b3e4a60a2cc66ea32855bfa思路1: /* struct ListNode {int val;st…

flask学习

flask学习 一、什么是flask Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug &#xff0c;模板引擎则使用 Jinja2 。Flask使用 BSD 授权。Flask也被称为 “microframework” &#xff0c;因为它使用简单的核心&#xff0c;用 extension 增加…

【STM32嵌入式系统设计与开发---拓展】——1_9_1上拉输入和下拉输入

在使用GPIO引脚时&#xff0c;上拉输入和下拉输入的选择取决于外部电路的特性和应用需求。以下是它们各自的应用场景&#xff1a; 1、上拉输入&#xff08;Pull-up Input&#xff09; 用途: 当默认状态需要为高电平时。 避免引脚悬空&#xff08;floating&#xff09;导致的…

浅说区间dp(下)

文章目录 环形区间dp例题[NOI1995] 石子合并题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示思路 [NOIP2006 提高组] 能量项链题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示思路 [NOIP2001 提高组] 数的划分题目描述输入格式输出格式样例 #1样例输…

深度学习落地实战:基于GAN(生成对抗网络)生成图片

前言 大家好&#xff0c;我是机长 本专栏将持续收集整理市场上深度学习的相关项目&#xff0c;旨在为准备从事深度学习工作或相关科研活动的伙伴&#xff0c;储备、提升更多的实际开发经验&#xff0c;每个项目实例都可作为实际开发项目写入简历&#xff0c;且都附带完整的代…

【Android Studio】整合okhttp发送get和post请求(提供Gitee源码)

前言&#xff1a;本篇博客教学大家如何使用okhttp发送同步/异步get请求和同步/异步post请求&#xff0c;这边博主把代码全部亲自测试过了一遍&#xff0c;需要源码的可以在文章最后自行拉取。 目录 一、导入依赖 二、开启外网访问权限 三、发送请求 3.1、发送同步get请求…

mac如何合并pdf文件到一个文件 macpdf合并 Mac如何合并pdf文件

在数字化的今天&#xff0c;pdf文件因其跨平台、格式统一等优势&#xff0c;已经成为工作、学习和生活中不可或缺的文件格式。然而&#xff0c;当我们需要合并多个pdf文件时&#xff0c;可能会感到有些无从下手。本文将为你详细介绍几种简单实用的合并pdf的方法&#xff0c;让你…

【学习css3】使用flex和grid实现等高元素布局

过往的实现方法是使用浮动加计算布局来实现&#xff0c;当flex和grid问世时&#xff0c;这一切将变得简单起来 一、简单的两列实现 1、先看页面效果 2、css代码 .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 2…

简单爬虫案例

准备工作&#xff1a; 1. 安装好python3 最低为3.6以上&#xff0c; 并成功运行pyhthon3 程序 2. 了解python 多进程原理 3. 了解 python HTTP 请求库 requests 的基本使用 4. 了解正则表达式的用法和python 中 re 库的基本使用 爬取目标 目标网站&#xff1a; https://…

STM32智能建筑能源管理系统教程

目录 引言环境准备智能建筑能源管理系统基础代码实现&#xff1a;实现智能建筑能源管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;能源管理与优化问题解决方案与优化收尾与总结 1. 引言 智能建筑能…

云计算数据中心(二)

目录 三、绿色节能技术&#xff08;一&#xff09;配电系统节能技术&#xff08;二&#xff09;空调系统节能技术&#xff08;三&#xff09;集装箱数据中心节能技术&#xff08;四&#xff09;数据中心节能策略和算法研究&#xff08;五&#xff09;新能源的应用&#xff08;六…