css + jq 实现环形进度条_jq css实现环形进度条-程序员宅基地

技术标签: css+jq实现环形进度条  js  

在大圆中画两个半圆遮盖,使用半圆的旋转来实现显示进度条

<div class="circle">
   <div class="circle_left">
      <div class="cir-left"></div>
    </div>
    <div class="circle_right">
       <div class="cir-right"></div>
     </div>
    <!-- 内容层 -->
    <div class="circle-content">
                                
     </div>
 </div>
.circle {
        font-size: 120px;
        width: 1em;
        height: 1em;
        position: absolute;
        border-radius: 50%;
        background: #3c3942;
        left: 50%;
        transform: translateX(-50%);
    }

    .circle_left,
    .circle_right,
    .cir-left,
    .cir-right {
        width: 1em;
        height: 1em;
        position: absolute;
        top: 0;
        left: 0;
    }

    .cir-left,
    .cir-right {
        border-radius: 50%;
        background: #fdbe19;
    }

    .circle_right,
    .cir-right {
        clip: rect(0, auto, auto, .5em);
    }

    .circle_left,
    .cir-left {
        clip: rect(0, .5em, auto, 0);
    }

    .circle-time-box {
        width: .9em;
        height: .9em;
        background-color: #1b1a1e;
        text-align: center;
    }

根据倒计时显示

var time = 30;
                var totaltime = 0;
                var totaldeg;
                var sdeg = (360 / time).toFixed(2);
                //显示的倒计时
                $("#lastTime").html(time);
                var mytimer = setInterval(function () {
                    time--;
                    totaltime++;
                    totaldeg = totaltime * sdeg;
                    if (totaldeg <= 180) {
                        $('.cir-right').css('transform', "rotate(" + totaldeg + "deg)");
                    } else {
                        $('.cir-right').css('transform', "rotate(180deg)");
                        $('.cir-left').css('transform', "rotate(" + (totaldeg - 180) + "deg)");
                    };
                    $("#lastTime").html(time);
                    if (time < 1) {
                        clearInterval(mytimer);
         
                    }
                }, 1000)

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43817724/article/details/102500528

智能推荐

混合背包问题---模板_混合背包二进制模板-程序员宅基地

文章浏览阅读231次。第二天叫醒我的不是闹钟,是梦想! 有 N 种物品和一个容量是 V 的背包。物品一共有三类:第一类物品只能用1次(01背包);第二类物品可以用无限次(完全背包);第三类物品最多只能用 si 次(多重背包);每种体积是 vi,价值是 wi。求解将哪些物品装入背包,可使物品体积总和不超过背包容量,且价值总和最大。输出最大价值。输入格式第一行两个整数,N,V,用空格隔开,分别表示物品..._混合背包二进制模板

wireshark抓取本地回环包_wireshark npf_loopback-程序员宅基地

文章浏览阅读2.9k次。一:The NPF driver isn’t running这个错误是因为没有开启NPF服务造成的。NPF即网络数据包过滤器(Netgroup Packet Filter,NPF)是Winpcap的核心部分,它是Winpcap完成困难工作的组件。它处理网络上传输的数据包,并且对用户级提供可捕获(capture)、发送(injection)和分析性能(analysis capabil_wireshark npf_loopback

PyTorch入门六 || 卷积神经网络(基础)_pytorch步长为2的卷积-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏2次。CNN基础 基于PyTorch_pytorch步长为2的卷积

大数据处理利器:Hadoop具有五大优势-程序员宅基地

文章浏览阅读773次。高可扩展性 Hadoop是一个高度可扩展的存储平台,因为他可以存储和分发横跨数百个并行操作的廉价的服务器数据集群。不同于传统的关系型数据库系统不能扩展到处理大量的数据,Hadoop是能给企业提供涉及成百上千TB的数据节点上运行的应用程序。 成本效益 Hadoop还为企业用户提供了极具成本..._hadoop的主要优势包括实时计算处理

ArcGIS修改矢量边界(土地利用图图斑)_arcgis pro 基于底图修改矢量边界-程序员宅基地

文章浏览阅读1.6w次,点赞7次,收藏53次。前言:本文就ArcGIS软件中的土地利用矢量图修改、更新方式进行介绍(其他矢量边界修改方式也可作为参考)。在处理土地利用图的过程中不免遇到矢量边界存在一些偏移,或者边界所围区域错分为一些类别。单块图斑还可以直接处理该图斑,但是进行按类融合后,对于局部的区域就较难编辑了(会影响到整个类的区域)。而土地利用矢量图又存在这拓扑(即这些图斑、或者融合后的地类是无缝隙、无重叠,这样才可以进行面积的计算、..._arcgis pro 基于底图修改矢量边界

谷歌Android 2.2支持Flash的十大后果(转)_手机版谷歌支持flash-程序员宅基地

文章浏览阅读387次。感谢瑞士留学的投递新闻来源:腾讯科技据国外媒体报道,由于Android 2.2操作系统的缘故,Adobe公司的Flash平台正在越来越多的Android手机上大行其道。对于那些批评苹果不在其iOS系统上支持Flash的人来说,Flash出现在Android 2.2是一件好事。Flash的支持者表示,Flash可以显著改善用户在智能手机上的浏览体验。 然而,并不是所有人都这么看。一些人认为,Flash只会带来安全漏洞,弊大于利。虽然这些人知道目前大部分的视频和游_手机版谷歌支持flash

随便推点

VC获取磁盘空间_vc 获取磁盘空间-程序员宅基地

文章浏览阅读873次。众所周知,在微软的操作系统下编写应用程序,最主要的还是通过windows所提供的api函数来实现各种操作的,这些函数通常是可以直接使用的,只要包含windows.h这个头文件。  今天我们主要介绍的是几个常用的api函数,通过它我们可以获取用户磁盘的相关信息。 其主要函数原型说明如下:  1.获取系统中逻辑驱动器的数量TheGetLogicalDrivesfunct..._vc 获取磁盘空间

android 7.1 缺少设置directBootAware导致无法启动指定Launcher-程序员宅基地

文章浏览阅读2.5k次。平台:Amlogic s905X + Android 7.1问题:内置指定应用作为Launcher并默认启动(PS: 同时存在MboxLauncher).开机后, 无法进入指定Launcher, 但是, 在输入HOME键后, 却可以显示存在两个Launcher, 通过代码检测, 也可以检测出指定Launcher存在.分析:|–frameworks/base/services/co..._directbootaware

2D图形_2d 图形gift-程序员宅基地

文章浏览阅读683次。package GUI;import java.awt.*;import javax.swing.*;import java.awt.geom.*; //提供用于在与二维几何形状相关的对象上定义和执行操作的 Java 2D 类。/** * * @author Zhu Zhengyan */public class DrawTest { public _2d 图形gift

【2017年蓝桥杯Java-B组省赛题解】_java计算a=1>2?3:4>5?6:7>8-程序员宅基地

文章浏览阅读1w次。2017Java-B组省赛一、购物单(计算器)二、纸牌三角形(模拟、数学思维去重)三、承压计算(杨辉三角、数学思维)四、魔方状态(做不来)五、六、程序填空题七、日期问题(非常细节的模拟、Calendar类)八、包子凑数(最大公约数)九、分巧克力(模拟、二分)※十、k倍区间(前缀和)一、购物单(计算器)标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物。老板忙的时候经常让小明帮忙到商场代为购物。小明很厌烦,但又不好推辞。 这不,XX大促销又来了!老板夫人开出了长长的购物_java计算a=1>2?3:4>5?6:7>8

数据标准化之均值方差标准化(原理+Python代码)-程序员宅基地

文章浏览阅读1.2w次,点赞4次,收藏29次。一、原理介绍常用的数据标准化方法有最大最小归一化、均值方差标准化、小数定标法、定量特征二值化等。其中,均值方差标准化是一种将数据转化为标准正态分布的标准化方法。在回归模型中,服从正态分布的自变量和因变量往往对应着较好的回归预测效果。均值方差标准化的计算公式为: x′=x−μσ x'=\frac{x-\mu }{\sigma } x′=σx−μ​公式中,x表示单个数据的取值,μ\muμ表示对应列的均值,σ\sigmaσ表示对应列的方差二、代码实现#加载模块from sklearn.preproces_均值方差标准化

iOS-UIDatePicker以及UIPickerView--日期选择和地址选择实现(省市县三级联动)-程序员宅基地

文章浏览阅读381次。金陵子弟来相送,欲行不行各尽觞!<地幔岩>简单说几句:UIDatePicker:1: 直接继承 UIControl (那么就可以有 addTarget ........的方法使用 可以添加相应的触发事件)2: 可以用来选择作为时间选择器, 通过 datePickerMode 选择样式效果3: 使用比较多的属性可以点进去看下一般就是 date(当前..._ios picker view 滑动的时候日期

推荐文章

热门文章

相关标签