<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. Linux内存管理 (23)一个内存Oops解析

    专题:Linux内存管理专题 关键词:DataAbort.fsr.pte.backtrace.stack.   在内存相关实际应用中,内存异常访问是一种常见的问题. 本文结合异常T32栈回溯.Oops ...

  2. Nginx（四）------nginx 负载均衡

    在上一篇博客我们介绍了 Nginx 一个很重要的功能——代理,包括正向代理和反向代理.这两个代理的核心区别是:正向代理代理的是客户端,而反向代理代理的是服务器.其中我们又重点介绍了反向代理,以及如何通 ...

  3. 基于 HTML5 的 3D 工业互联网展示方案

    前言 通用电气(GE).IBM.英特尔等公司主推的“工业互联网”正在经历“产品-数据分析平台-应用-生态”的演进.这主要得益于 Predix 数据分析平台对工业互联网应用的整合能力.Predix 就像 ...

  4. Spring 使用AOP——基于注解配置

    首先,使用注解实现AOP是基于AspectJ方式的. 创建包含切点方法的类 package cn.ganlixin.test; import org.aspectj.lang.annotation.P ...

  5. js04-DOM对象一

    一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现 ...

  6. [SimplePlayer] 3. 视频帧同步

    Frame Rate 帧率代表的是每一秒所播放的视频图像数目.通常,视频都会有固定的帧率,具体点地说是每一帧的时间间隔都是一样的,这种情况简称为CFR(Constant Frame Rate);另外一 ...

  7. PHP——判断是否为加密协议https

    前言 就是一个封装的方法,用来判断域名前面是加http还是https 代码 function is_ssl() { if(isset($_SERVER['HTTPS']) && ('1 ...

  8. MySQL INSERT UPATE DELETE语句

    插入完整一行 INSERT INTO customers(cust_name,cust_contact,cust_email,cust_address,cust_city,cust_state,cus ...

  9. pymongo 使用方法(增删改查)

    #!/usr/bin/env python # -*- coding:utf-8 -*- """ MongoDB存储 在这里我们来看一下Python3下MongoDB的存 ...

  10. AHOI2019N省联考凉凉记

    博主并未时空穿越,本文没有对选手造成恐慌 DAY0 这已经是我第四次省选了,时间真快啊,怀念三年前毫无压力的省选,考完以后如果有时间并且没退役的话可能会陆续搬以前写在别处的游记(主要是2018年的游记 ...