<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. 拜托！面试请不要再问我Spring Cloud底层原理

    概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...

  2. 使用Github生成燃尽图

    经过一晚上折腾,终于算是把linux上成功生成了我们团队项目的燃尽图,效果还是不错,在过程中又发现了另一种生成燃尽图的方式,也是基于一个开源项目. 1.准备: 首先你的项目一定要有milestone. ...

  3. idea免费破解

    1.下载破解补丁. https://pan.baidu.com/s/1pWCr_HIHURSAbGvvo70wKA   密码:pxkv 2.下载idea网址: https://www.jetbrain ...

  4. iview 无法缓存的问题

  5. Python进阶2---树的遍历和堆排序

    二叉树的遍历 堆排序Heap Sort 堆排序的过程 完整过程: #打印完整的二叉树 import math #打印完全二叉树,此函数非必要只是为了显示便利! def print_tree(lst): ...

  6. root密码重置、Linux目录结构和远程连接Linux

    一.root如何重置密码 1. 重启 Linux 系统主机并出现引导界面时,按下键盘上的 e 键进入内核编辑界面 2. 在 linux16 参数这行的最后面追加“rd.break”参数,然后按下 Ct ...

  7. [BZOJ 3110] [ZJOI 2013] K大数查询

    Description 有 \(N\) 个位置,\(M\) 个操作.操作有两种,每次操作如果是: 1 a b c:表示在第 \(a\) 个位置到第 \(b\) 个位置,每个位置加入一个数 \(c\): ...

  8. python学习日记（初识面向对象）

    面向过程 VS 面向对象 面向过程 面向过程的程序设计把计算机程序视为一系列的命令集合,即一组函数的顺序执行.为了简化程序设计,面向过程把函数继续切分为子函数,即把大块函数通过切割成小块函数来降低系统 ...

  9. fzyzojP1635 -- 平均值

    做法大概有两种: 1.二分平均值,每个值减去平均值,求有没有一个区间的总和大于等于0 (类比,中位数是二分之后,比mid大的为1,小的为0,看有没有区间大于等于0这样) 最值问题——判定问题 单调队列 ...

  10. Swagger - ui 学习

    今天同组的打伙伴给介绍了 Swagger-ui 这个 自动生成 接口文档的 工具,感觉比较方便好用, 遂决定 学习一下, 开个随笔进行随时记录,同时也是提醒自己 先保存两篇感觉还不错的文章 : htt ...