<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. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  2. virtualbox 设置centos7 双网卡上网

    上次用virtualbox安装centos6.6,这次装了一个centos7.0.用两个版本的配置还是大同小异的. 1.修改/etc/sysconfig/network-scripts/ifcfg-e ...

  3. swipe.js实现支持手拔与自动切换的图片轮播

    一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div cla ...

  4. centos 6.8 nginx+mysql+php

    1:查看环境: [root@123 /]# cat /etc/redhat-release CentOS release 6.8 (Final) 2:关掉防火墙 [root@123 /]# chkco ...

  5. 播放器更改语言归属地后Cnario player软件无法启动的问题

    打开系统运行,输入regedit,进入注册表编辑器. 找到HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\C-nario\Player下面culture 的值,删除即可 ...

  6. php函数 array_diff

    array_diff ( array $array1 , array $array2 [, array $... ] ) : array 对比 array1 和其他一个或者多个数组,返回在 array ...

  7. 微信小程序开发编程手记20190303

    三元表达式: 运算: 引号与花括号之间如果有空格,将被视为字符串: pages页面容器标签: vscode:

  8. js判断数组中有没有指定元素

    list.findIndex(target => target.sel === 指定元素) ,如果找到返回下标,如果没有返回-1

  9. Visual Studio Code常用设置及快捷键

    1. Visual Studio Code常用设置 { // 控制是否显示 minimap(缩略图) "editor.minimap.enabled": false, // 控制折 ...

  10. python json数据的转换

    1  Python数据转json字符串 import json json_str = json.dumps(py_data) 参数解析: json_str = json.dumps(py_data,s ...