<html>

<head>

<title>test</title>
<!--本DEMO参考http://www.cnblogs.com/jr1993/p/4677921.html设计，实现传入百分比数值，通过JS计算按百分比显示圆环图形功能-->

<style type="text/css">

.circleProgress_wrapper{

    width: 200px;

    height: 200px;

    margin: 50px auto;

    position: relative;

    border:1px solid #ddd;

}

.wrapper{

    width: 100px;

    height: 200px;

    position: absolute;

    top:0;

    overflow: hidden;

}

.right{

    right:0;

}

.left{

    left:0;

}

.circleProgress{

    width: 160px;

    height: 160px;

    border:20px solid transparent;

    border-radius: 50%;

    position: absolute;

    top:0;

    -webkit-transform: rotate(45deg);

}

.rightcircle{

    border-top:20px solid #ccc;

    border-right:20px solid #ccc;

    border-left:20px solid #ccc;

    border-bottom:20px solid #ccc;

    right:0;

}

.leftcircle{

    border-bottom:20px solid #ccc;

    border-left:20px solid #ccc;

    border-top:20px solid #ccc;

    border-right:20px solid #ccc;

    left:0;

}

.percent {

    position: absolute;

    top: 90;

    left: 85;

}

</style>

</head>

<body>

<div class="circleProgress_wrapper">

        <div class="wrapper right">

            <div class="circleProgress rightcircle"></div>

        </div>

        <div class="wrapper left">

            <div class="circleProgress leftcircle"></div>

        </div>

        <span class="percent" int-percent='100'>100%</span>

 </div>

 </body>

 </html>

 <script type="text/javascript" src="jquery-1.8.3.min.js" ></script>

 <script>

 var deg = {percent:100,left:225,leftBC:"#ccc",right:225,rightBC:"#ccc"};

 var pint;

$(function(){

    loadPercent($(".percent").attr("int-percent"));

    pint = setInterval("refreshPercent()",100);

 });

 function refreshPercent() {

    var percent = $(".percent").attr("int-percent");

    if (percent>0) {

        percent--;

    } else if (percent == 0){

        percent = 100;

    }

    $(".percent").attr("int-percent",percent);

    $(".percent").html(percent+"%");

    if (percent==48) {

        window.clearInterval(pint);

    }

    deg.percent=percent;

    loadPercent(percent);

 }

 function loadPercent(percent) {

    var allDeg = countDegByPercent(percent);

    if (allDeg>=180) {

        var tmpDeg = allDeg - 180;

        deg.left=45+tmpDeg;

        deg.right=225

        deg.leftBC="green";

        deg.rightBC="green";

    } else {

        deg.right=45+allDeg;

        deg.rightBC="green";

        deg.leftBC="#ccc";

    }

    console.log(deg);

    $(".circleProgress.rightcircle").css({"-webkit-transform":"rotate("+deg.right+"deg)","border-left":"20px solid "+deg.rightBC,"border-bottom":"20px solid "+deg.rightBC});

    $(".circleProgress.leftcircle").css({"-webkit-transform":"rotate("+deg.left+"deg)","border-top":"20px solid "+deg.leftBC,"border-right":"20px solid "+deg.leftBC});

 }

 function countDegByPercent(percent) {

    return percent*3.6;

 }

 </script>

CSS圆环百分比DEMO的更多相关文章

  1. css圆环百分比

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. css3圆环百分比，菜单栏定位导航

    前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...

  3. 图片框住一个小视频 谈css padding百分比自适应

    今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图. 如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最 ...

  4. 用css动态实现圆环百分比分配——初探css3动画

    最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...

  5. css画百分比圆环

    html: <div class="circle"> <div class="percent-circle percent-circle-left&qu ...

  6. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  7. Css Secret 案例Demo全套

    Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...

  8. vue实用组件——圆环百分比进度条

    因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...

  9. css的小demo

    demo1 一个高度随宽度变化的正方形   (缩小屏幕试试) 原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的. .Square{ display: inline ...

随机推荐

  1. MyExceptionFilter 异常注入

    public class MyExceptionFilter : IExceptionFilter { private ILogService logService; public MyExcepti ...

  2. LOJ3053 十二省联考2019 希望 容斥、树形DP、长链剖分

    传送门 官方题解其实讲的挺清楚了,就是锅有点多-- 一些有启发性的部分分 L=N 一个经典(反正我是不会)的容斥:最后的答案=对于每个点能够以它作为集合点的方案数-对于每条边能够以其两个端点作为集合点 ...

  3. SpringCloud（3）服务消费者（Feign）

    上一篇文章,讲述了如何通过 RestTemplate+Ribbon 去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 1.Feign简介 Feign是一个声明式的伪Http客户端,它使得写H ...

  4. 解读 IoC 框架 InversifyJS

    原文链接 InversityJS 是一个 IoC 框架.IoC(Inversion of Control) 包括依赖注入(Dependency Injection) 和依赖查询(Dependency ...

  5. C#中UDP数据的发送､接收

    Visual C# UDP数据的发送､接收包使用的主要类及其用法: 用Visual C# UDP协议的实现,最为常用,也是最为关键的类就是UdpClient,UdpClient位于命名空间System ...

  6. java异常处理规范

    异常处理的优势[存在意义]:异常检测者有检测出异常的能力,但不知道在出现该异常的情况下应该怎么处理.故库方法一般会抛出异常给调用者来处理.所以总结而言,异常处理的优势就是,将处理错误(调用者处理)从检 ...

  7. vue 使用微信JSSDK，在IOS端会授权出错

    原因: vue-router切换的时候操作的都是浏览器的历史记录,iOS会把第一次刚进入时的URL作为真实URL,安卓会把当前URL作为真实URL. 所以导致后端在配置好的授权参数获得的config参 ...

  8. 4.ansible的delegate_to

    完成发布流程如下 first 修改nginx 配置文件下线 web1-2 使用 delegate_to 将默认hosts指定为 nginx主机 使用remote_user 将用户 锁定为 root s ...

  9. Nginx 进程间如何共享内存

    L:37 Nginx 针对多进程用的是自旋锁(占用共享内存时间比较短的情况下否则可能会影响性能)注:自旋锁是不停的请求共享内存 而原先的信号量是等待占用者释放后通知等待的进程

  10. JQ初级

    一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 jQuery是一个简洁高效的且功能丰富的JavaScript工具库 2.jQuery的优势 ...