一、实现原理

首先,我们来一个(黑色)。
接着,再来两个半圆,将黑色的圆遮住。(为了演示,左右两侧颜色不一样)
这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12.5%),效果出来了。
如果我们将蓝色的右半圆同样设置成灰色,看效果,一个12.5%的饼图就出来了!

OK,我们再旋转更大的度数试试,比如40%(144度),50%(180度),60%(216度)如下图。
我们发现,旋转180度之后右半圆与左半圆重合了,如果再旋转,就会在右上角冒出来,显然不是我们想要的。

我们希望的是,继续旋转被黑色遮住。。。嗯。。。怎么做呢?

我们将右侧的圆回归原位,把它刷成黑色(和底色一样),然后旋转左边的半圆(它在右侧半圆的更底层),这样,它就会被右侧半圆遮住了。好的,废话不多说,我们将左侧的半圆顺时针旋转45度,效果出来了。可以想象,继续旋转,180度的时候,就完全被右侧半圆遮住,而左侧底色全部暴露,这样100%显示出来了。

最后,加上一个白色的小圆,放在正中间就行了。

好的,到这里,我们已经明白如何实现的了。

二、代码实现

html部分

<div class="circle-bar">
<div class="circle-bar-left"></div>
<div class="circle-bar-right"></div>
<!-- 遮罩层,显示百分比 -->
<div class="mask">
<span class="percent">60%</span>
</div>
</div>

css部分

    /*支持IE9及以上*/
.circle-bar { font-size:200px; width: 1em; height: 1em; position: relative; background-color: #333; }
.circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }
/*
这里采用clip剪切了圆,实现左右两个半圆,右半圆在后面,因此在更上一层,
clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right { clip:rect(0,auto,auto,.5em); }
.circle-bar-left { clip:rect(0,.5em,auto,0); } .mask { width: 0.8em; height: 0.8em; background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
.mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block; }
/*所有的后代都水平垂直居中,这样就是同心圆了*/
.circle-bar * { position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
/*自身以及子元素都是圆*/
.circle-bar, .circle-bar > * { border-radius: 50%; }

JavaScript实现

    //反正CSS3中的border-radius属性IE8是不支持了,所以这里就用新方法吧getElementsByClassName()走起
window.onload = function(){ var circleBar = document.getElementsByClassName('circle-bar')[0];
var percent = parseInt(circleBar.getElementsByClassName('percent')[0].firstChild.nodeValue);
var color = circleBar.css('background-color');
var left_circle = circleBar.getElementsByClassName('circle-bar-left')[0];
var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0]; if( percent <= 50 ) {
var rotate = 'rotate('+(percent*3.6)+'deg)';
right_circle.css3('transform',rotate);
}else {
var rotate = 'rotate('+((percent-50)*3.6)+'deg)';
right_circle.css ('background-color',color);//背景色设置为进度条的颜色
right_circle.css3('transform','rotate(0deg)');//右侧不旋转
left_circle.css3 ('transform',rotate);//左侧旋转
}
} //封装了css3函数,主要是懒得重复书写代码,既然写了css3函数,顺便写个css吧,统一样式,好看一些
Element.prototype.css = function(property,value){ if ( value ) {
//CSS中像background-color这样的属性,‘-’在JavaScript中不兼容,需要设置成驼峰格式
var index = property.indexOf('-');
if( index != -1 ) {
var char = property.charAt(index+1).toUpperCase();
property.replace(/(-*){1}/,char);
}
this.style[property] = value;
}else{
//getPropertyValue()方法参数类似background-color写法,所以不要转驼峰格式
return window.getComputedStyle(this).getPropertyValue(property);
}
} //封装一个css3函数,用来快速设置css3属性
Element.prototype.css3 = function(property,value){
if( value ){
property = capitalize(property.toLowerCase());
this.style['webkit'+property] = value;
this.style['Moz'+property] = value;
this.style['ms'+property] = value;
this.style['O'+property] = value;
this.style[property.toLowerCase()] = value;
}else{
return window.getComputedStyle(this).getPropertyValue(
('webkit'+property)||('Moz'+property)||('ms'+property)||('O'+property)||property);
//老实说,我不知道为什么要把不带浏览器标记的放在最后,既然都这么用,我也这么做吧。不过这样对现代浏览器来说可能并不好,判断次数变多了
} //首字母大写
function capitalize(word){
return word.charAt(0).toUpperCase() + word.slice(1);
}
}

jQuery实现


$(function(){ var percent = parseInt($('.mask :first-child').text());
var baseColor = $('.circle-bar').css('background-color'); if( percent<=50 ){
$('.circle-bar-right').css('transform','rotate('+(percent*3.6)+'deg)');
}else {
$('.circle-bar-right').css({
'transform':'rotate(0deg)',
'background-color':baseColor
});
$('.circle-bar-left').css('transform','rotate('+((percent-50)*3.6)+'deg)');
}
})

jQuery这么简单好用,为什么还要写JavaScript?

一来,学习JavaScript的使用,毕竟有些方法可能是不太熟悉的,多查查文档,混个眼熟。
二来,万一项目中不需要使用jQuery呢,以后还得实现。

办公资源网址导航
https://www.wode007.com

三、总结体会

在规定圆的大小的时候,使用了font-size属性,而长度大小则基于font-size,也就是em为单位,这样有一个好处,只要修改font-size的值,就可以改变圆的大小了,非常方便。

另外,写css的时候,尽可能将相同功能的代码提取出来,将某个功能写在一个{}中,起一个好名字,以后方便复用,bootstrap就是这么玩的,简洁、易读,通过classname基本就能知道标签有哪些特性了。

CSS3+JS实现静态圆形进度条的更多相关文章

  1. 利用css3动画和border来实现圆形进度条

    最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和 ...

  2. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  3. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  4. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  5. jquery 圆形进度条

    最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...

  6. Highcharts 测量图;Highcharts 圆形进度条式测量图;Highcharts 时钟;Highcharts 双轴车速表;Highcharts 音量表(VU Meter)

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  7. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  8. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  9. vue 圆形进度条组件解析

    项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

随机推荐

  1. Java实现 蓝桥杯 历届试题 连号区间数

    问题描述 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个到第R个元素)递增 ...

  2. 启动appium server时打印日志时间

    在调试脚本的时候想看查找元素和执行命令花了多少时间,我们可以在启动appium server的时候加上启动参数,实现我们的需求. 1)输入:appium h,可以查看appium提供的启动参数有哪些. ...

  3. Go 语言入门教程:变量

    基础使用 // base.go  注释package main  // 包名import "fmt"  // 导入 func main() { fmt.Println(" ...

  4. DirectX11 With Windows SDK--31 阴影映射

    前言 阴影既暗示着光源相对于观察者的位置关系,也从侧面传达了场景中各物体之间的相对位置.本章将起底最基础的阴影映射算法,而像复杂如级联阴影映射这样的技术,也是在阴影映射的基础上发展而来的. 学习目标: ...

  5. python抓取网页引用的模块和类

    在Python3.x中,我们可以使用urlib这个组件抓取网页,urllib是一个URL处理包,这个包中集合了一些处理URL的模块,如下:1.urllib.request模块用来打开和读取URLs:2 ...

  6. git添加所有新文件

    git add -A 提交所有变化 git add -u 提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) git add . 提交新文件(new)和被修改(mod ...

  7. 三星note8港版如何显示电量百分比呢?

    设置-通知-状态栏,显示电量百分比打钩即可.

  8. frp多层socks代理+端口映射

    一.首先在公网上配置服务端(frps.ini) [common] bind_addr = xx.xx.xx.xx #公网vps的ip bind_port = 7000   二.配置客户端frpc. i ...

  9. Andrew Ng - 深度学习工程师 - Part 2. 改善深层神经网络:超参数调试、正则化以及优化(Week 2. 优化算法)

    ===========第2周 优化算法================ ===2.1 Mini-batch 梯度下降=== epoch: 完整地遍历了一遍整个训练集 ===2.2 理解Mini-bat ...

  10. Java WebService(实战) 简单实例

    一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 1.创建[Web Service Project],命名为[TheService ...