<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. triplet loss 在深度学习中主要应用在什么地方？有什么明显的优势？

    作者:罗浩.ZJU链接:https://www.zhihu.com/question/62486208/answer/199117070来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  2. 为奋战在HIS创新路上的医院信息科赋能

    为奋战在HIS创新路上的医院信息科赋能 南京都昌信息科技有限公司 袁永福 2017-7 ◆◆前言 近日,上海瑞金医院向我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展 ...

  3. Linux基础(一)

    01-服务器 1.1 服务器型号 1.2 电源---双电源 1.3 CPU---计算,(2个CPU=2路) 1.4 内存 面试题:bufffer和cache的区别? buffer:写入数据到内存里,这 ...

  4. lombok的简单使用小结

    1.idea安装lombok插件 关于lombok如何在idea中使用,下面这篇博客写的很到位,并且提供了本地安装对应idea版本的lombok插件的地址.如果无法通过idea直接安装lombok,可 ...

  5. 关于学习springboot和springcloud的很不错的教程

    近日,逐步开始学习了springboot和springcloud.本以为很简单,但是随着学习的深入,发现其中有很多地方都需要认真揣摩.凡事都需要循序渐进,有一个好的开端就是成功的一半.于是在浩瀚的网络 ...

  6. h5-canvas 像素操作

    ###1.得到场景像素数据 getImageData():获得一个包含画布场景像素数据的ImageData对象,它代表了画布区域的对象数据 ctx.getImageData(sx,sy,sw,sh) ...

  7. js中 ajax动态新增节点无法触发点击事件

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...

  8. 整合Spring5+Struts2.5+Hibernate5+maven

    1. 使用Eclipse创建Maven项目 2. 配置pom.xml引入需要的依赖包 <dependencies> <dependency> <groupId>ju ...

  9. Python——Flask框架——电子邮件

    一.框架(Flask-Mail) 安装 : pip install flask-mail 二.SMTP服务器的配置 配置 默认值 说明 MAIL_SERVER locallhost 电子邮件服务器的主 ...

  10. iOS 利用高德地图WMS服务

    Demo:  https://github.com/xushiyou23/AMapTesting 转: 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net ...