iTakeo

css3的实现圆环百分比统计。

css3的实现圆环统计、百分比显示组件。

先来看一个基本的例子：

  1. function rotate() {  
  2.     //随机获取数值  
  3.     var now = Math.floor(Math.random() * 100 + 0);  
  4.     //乘以比例  
  5.     var rotatenum = ‘rotate(‘ + now * 1.8 + ‘deg)’;  
  6.     //这里是为了rotate出现虚边做的兼容处理  
  7.     var s = 4;  
  8.     if(now==0 && now<96){s = 0;};  
  9.     if(now>=96){s = 1;};  
  10.     var rotatenum2 = ‘rotate(‘ + (now * 1.8+s) + ‘deg)’;  
  11.     //获取对应元素  
  12.     var progress = document.querySelector(‘#progress’);  
  13.     var progress_circle = document.querySelector(‘#progress-circle’);  
  14.     var progress_style = document.querySelector(‘#progress-style’);  
  15.     //修改显示内容  
  16.     progress.innerHTML = now + ‘%’;  
  17.     //添加动画  
  18.     progress_style.innerHTML = ‘.p-f,.p-f:before{transform: ‘ + rotatenum + ‘}.p-h:before{transform: ‘ + rotatenum2 + ‘}’;  
  19.     progress_circle.onclick = function(){  
  20.         rotate();  
  21.     };  
  22. };  
  23. document.body.onload = function(){  
  24.     rotate();  
  25. };  


0%

根据上面的例子，然后封装一个小组件，来利于调用和重复使用。

  1. //默认无参数调用，数值需写在data-num属性上    
  2. rotate(‘.circle’).init();    
  3.     
  4. //带参调用    
  5. rotate(‘.circle’).init({    
  6.     number : 20, //数值  
  7.     width:100,  //宽度，宽度可写百分比，比如‘20%’    
  8.     bgColor:’yellow’,  //背景颜色    
  9.     rotateColor:’red’, //圆环的颜色    
  10.     space : 5,   //圆环的粗细    
  11.     speed : 1000,  //速度    
  12.     hide : false //是否隐藏中间的数字    
  13. });    
  1. //html结构如下，百分比数值可直接写在data-num属性上  
  2. <div class=“circle” data-num=’90’></div>  

通过其他的配置参数来定制：

可以点击这里下载demo演示


2015/08/31 0 /
前端
/
标签:  暂无标签

验证码： 9 + 4 =

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部