javascript
css3静态进度条,CSS3+JS实现静态圆形进度条
一、實(shí)現(xiàn)原理
首先，我們來(lái)一個(gè)圓(黑色)。
接著，再來(lái)兩個(gè)半圓，將黑色的圓遮住。(為了演示，左右兩側(cè)顏色不一樣)
這時(shí)候，我們順時(shí)針旋轉(zhuǎn)右側(cè)藍(lán)色的半圓，下面的黑色圓就會(huì)暴露出來(lái)，比如我們旋轉(zhuǎn)45度(12.5%)，效果出來(lái)了。
如果我們將藍(lán)色的右半圓同樣設(shè)置成灰色，看效果，一個(gè)12.5%的餅圖就出來(lái)了！
OK，我們?cè)傩D(zhuǎn)更大的度數(shù)試試，比如40%(144度)，50%(180度)，60%(216度)如下圖。
我們發(fā)現(xiàn)，旋轉(zhuǎn)180度之后右半圓與左半圓重合了，如果再旋轉(zhuǎn)，就會(huì)在右上角冒出來(lái)，顯然不是我們想要的。
我們希望的是，繼續(xù)旋轉(zhuǎn)被黑色遮住。。。嗯。。。怎么做呢？
我們將右側(cè)的圓回歸原位，把它刷成黑色(和底色一樣)，然后旋轉(zhuǎn)左邊的半圓(它在右側(cè)半圓的更底層)，這樣，它就會(huì)被右側(cè)半圓遮住了。好的，廢話不多說(shuō)，我們將左側(cè)的半圓順時(shí)針旋轉(zhuǎn)45度，效果出來(lái)了?？梢韵胂?#xff0c;繼續(xù)旋轉(zhuǎn)，180度的時(shí)候，就完全被右側(cè)半圓遮住，而左側(cè)底色全部暴露，這樣100%顯示出來(lái)了。
最后，加上一個(gè)白色的小圓，放在正中間就行了。
好的，到這里，我們已經(jīng)明白如何實(shí)現(xiàn)的了。
二、代碼實(shí)現(xiàn)
html部分
60%
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剪切了圓，實(shí)現(xiàn)左右兩個(gè)半圓，右半圓在后面，因此在更上一層，
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實(shí)現(xiàn)
//反正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);//背景色設(shè)置為進(jìn)度條的顏色
right_circle.css3('transform','rotate(0deg)');//右側(cè)不旋轉(zhuǎn)
left_circle.css3 ('transform',rotate);//左側(cè)旋轉(zhuǎn)
}
}
//封裝了css3函數(shù)，主要是懶得重復(fù)書寫代碼，既然寫了css3函數(shù)，順便寫個(gè)css吧，統(tǒng)一樣式，好看一些
Element.prototype.css = function(property,value){
if ( value ) {
//CSS中像background-color這樣的屬性，‘-’在JavaScript中不兼容，需要設(shè)置成駝峰格式
var index = property.indexOf('-');
if( index != -1 ) {
var char = property.charAt(index+1).toUpperCase();
property.replace(/(-*){1}/,char);
}
this.style[property] = value;
}else{
//getPropertyValue()方法參數(shù)類似background-color寫法，所以不要轉(zhuǎn)駝峰格式
return window.getComputedStyle(this).getPropertyValue(property);
}
}
//封裝一個(gè)css3函數(shù)，用來(lái)快速設(shè)置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);
//老實(shí)說(shuō)，我不知道為什么要把不帶瀏覽器標(biāo)記的放在最后，既然都這么用，我也這么做吧。不過(guò)這樣對(duì)現(xiàn)代瀏覽器來(lái)說(shuō)可能并不好，判斷次數(shù)變多了
}
//首字母大寫
function capitalize(word){
return word.charAt(0).toUpperCase() + word.slice(1);
}
}
jQuery實(shí)現(xiàn)
$(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這么簡(jiǎn)單好用，為什么還要寫JavaScript？
一來(lái)，學(xué)習(xí)JavaScript的使用，畢竟有些方法可能是不太熟悉的，多查查文檔，混個(gè)眼熟。
二來(lái)，萬(wàn)一項(xiàng)目中不需要使用jQuery呢，以后還得實(shí)現(xiàn)。
三、總結(jié)體會(huì)
在規(guī)定圓的大小的時(shí)候，使用了font-size屬性，而長(zhǎng)度大小則基于font-size，也就是em為單位，這樣有一個(gè)好處，只要修改font-size的值，就可以改變圓的大小了，非常方便。
另外，寫css的時(shí)候，盡可能將相同功能的代碼提取出來(lái)，將某個(gè)功能寫在一個(gè){}中，起一個(gè)好名字，以后方便復(fù)用，bootstrap就是這么玩的，簡(jiǎn)潔、易讀，通過(guò)classname基本就能知道標(biāo)簽有哪些特性了。
利用css3動(dòng)畫和border來(lái)實(shí)現(xiàn)圓形進(jìn)度條
最近在學(xué)習(xí)前端的一些知識(shí),發(fā)現(xiàn)border的功能十分強(qiáng)大啊! 首先來(lái)看看demo 就是這么一個(gè)圓形的進(jìn)度條,在文本框中輸入0-100的數(shù)值下面的進(jìn)度條相應(yīng)的轉(zhuǎn)到多少 這個(gè)主要是利用border,旋轉(zhuǎn)和 ...
移動(dòng)端純CSS3制作圓形進(jìn)度條所遇到的問(wèn)題
近日在開(kāi)發(fā)的頁(yè)面中,需要制作一個(gè)動(dòng)態(tài)的圓形進(jìn)度條,首先想到的是利用兩個(gè)矩形,寬等于直徑的一半,高等于直徑,兩個(gè)矩形利用浮動(dòng)貼在一起,設(shè)置overflow:hidden屬性,作為盒子,內(nèi)部有一個(gè)與其寬高 ...
canvas圓形進(jìn)度條
通過(guò)定義一個(gè)canvas標(biāo)簽, new方法傳進(jìn)ID值,和旋轉(zhuǎn)角度值,即可生成圓形進(jìn)度條 & ...
簡(jiǎn)單實(shí)用的純CSS百分比圓形進(jìn)度條插件
percircle是一款簡(jiǎn)單實(shí)用的純CSS百分比圓形進(jìn)度條插件.你不需要做任何設(shè)置,只需要按該圓形進(jìn)度條插件提供的標(biāo)準(zhǔn)HTML結(jié)構(gòu)來(lái)編寫代碼,就可以生成一個(gè)漂亮的百分比圓形進(jìn)度條. 首先要做的就是引入 ...
jquery 圓形進(jìn)度條
最近手里面的項(xiàng)目需要完成這個(gè)對(duì)設(shè)備性能的檢測(cè)顯示功能,需要使用到圓形進(jìn)度條這樣的效果,網(wǎng)上找了一圈,有很多相當(dāng)?shù)牟寮?找到:circliful 插件,看了他的使用說(shuō)明比較的方便,于是就下載了它并將自己 ...
Highcharts 測(cè)量圖；Highcharts 圓形進(jìn)度條式測(cè)量圖；Highcharts 時(shí)鐘；Highcharts 雙軸車速表；Highcharts 音量表(VU Meter)
Highcharts 測(cè)量圖 配置 chart.type 配置 配置 chart 的 type 為 'gauge' .chart.type 描述了圖表類型.默認(rèn)值為 "line". ...
微信小程序動(dòng)畫之圓形進(jìn)度條
微信小程序動(dòng)畫之圓形進(jìn)度條 上圖: js: //獲取應(yīng)用實(shí)例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...
JS框架_(JQbar.js)柱狀圖動(dòng)態(tài)百分比進(jìn)度條特效
百度云盤 傳送門 密碼:q6rt 柱狀圖動(dòng)態(tài)百分比進(jìn)度條效果
jqbar.js柱狀圖動(dòng)態(tài)百分比進(jìn)度條特效vue 圓形進(jìn)度條組件解析
項(xiàng)目簡(jiǎn)介 本組件是vue下的圓形進(jìn)度條動(dòng)畫組件 自由可定制,幾乎全部參數(shù)均可設(shè)置 源碼簡(jiǎn)單清晰 面向人群 急于使用vue圓形進(jìn)度條動(dòng)畫組件的同學(xué).直接下載文件,拷貝代碼即可運(yùn)行. 喜歡看源碼,希望了解 ...
隨機(jī)推薦
C#打開(kāi)一個(gè)文本文件并讀寫
OpenFileDialog OFD = new OpenFileDialog(); OFD.Title = "打開(kāi)第一個(gè)文本文件"; OFD.FileName = "* ...
Datediff函數(shù) 助你實(shí)現(xiàn)不同進(jìn)制時(shí)間之間的運(yùn)算
在VB開(kāi)發(fā)環(huán)境中實(shí)現(xiàn)時(shí)間之間的加減運(yùn)算有很多種方法,前不久自己無(wú)意中發(fā)現(xiàn)了Datediff函數(shù),它能夠比較簡(jiǎn)單.全面地實(shí)現(xiàn)我們比較常用的時(shí)間之間的運(yùn)算,今由自己的研究,搞清了它的一些用法,拿來(lái)和大家分 ...
ANDROID 中UID與PID的作用與區(qū)別
PID:為Process Identifier, PID就是各進(jìn)程的身份標(biāo)識(shí),程序一運(yùn)行系統(tǒng)就會(huì)自動(dòng)分配給進(jìn)程一個(gè)獨(dú)一無(wú)二的PID.進(jìn)程中止后PID被系統(tǒng)回收,可能會(huì)被繼續(xù)分配給新運(yùn)行的程序,但是在a ...
es 6點(diǎn)滴記錄
關(guān)于babel和webpack的使用: Babel 所做的只是幫你把'ES6 模塊化語(yǔ)法'轉(zhuǎn)化為'CommonJS 模塊化語(yǔ)法',其中的require exports 等是 CommonJS 在具體實(shí) ...
angular4升級(jí)angular5問(wèn)題記錄之this.location.back()
在之前的項(xiàng)目中,導(dǎo)航回上一個(gè)路由采用注入的Location服務(wù),利用瀏覽器的歷史堆棧,導(dǎo)航到上一步. 官方文檔也就是這么寫的 而然在升級(jí)到5.2的版本的時(shí)候,在瀏覽器運(yùn)行的時(shí)候并沒(méi)有什么問(wèn)題,在項(xiàng)目打 ...
用canal同步binlog到kafka，spark streaming消費(fèi)kafka topic亂碼問(wèn)題
canal 1.1.1版本之后, 默認(rèn)支持將canal server接收到的binlog數(shù)據(jù)直接投遞到MQ, 目前默認(rèn)支持的MQ系統(tǒng)有kafka和RocketMQ. 在投遞的時(shí)候我們使用的是非壓平的消 ...
重新配置dbconsole的步驟
重新配置dbconsole的步驟emca?-repos?dropemca?-repos?createemca?-config?dbcontrol?dbemctl?start?dbconsole
java-javaweb_URL重寫
Java WEB實(shí)現(xiàn)URL重寫的優(yōu)缺點(diǎn)及如何實(shí)現(xiàn): http://blog.csdn.net/cselmu9/article/details/8062033 urlrewrite 地址重寫: http ...
Android getevent用法詳解
getevent 指令用于獲取 input 輸入事件,比如獲取按鍵上報(bào)信息.獲取觸摸屏上報(bào)信息等. 指令源碼路徑:/system/core/toolbox/getevent.c getevent -h ...
總結(jié)
以上是生活随笔為你收集整理的css3静态进度条,CSS3+JS实现静态圆形进度条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 软件测试一支笔的用途,面试解答：写出一支
- 下一篇： 渗透新手入门