#arcProgress# 让你的进度条动起来

大爱杰伦

1. /*示例简介:
   
2. 打开三个不同风格圆形进度条;
   
3. 进度条的背景色和进度色均为随机颜色;
   
4. 动态自动设置进度;
   
5. */
   
6. 
   
7. /* 加载 圆形进度条 模块. */
   
8. var arcProgress = api.require('arcProgress');
   
9. 
   
10. 
    
11. /* 打开模块,并动态设置 圆形进度条 进度*/
    
12. 
    
13. /* 寻找一个适合的半径*/
    
14. var radius = api.frameWidth / 6.0;
    
15. 
    
16. for(var i =0; i < 3; i++){
    
17.     arcProgress.open({
    
18.         type: i,
    
19.         centerX: radius * (2 * i  + 1),
    
20.         centerY: api.frameHeight / 2.0,
    
21.         radius: radius,
    
22.         bgColor: randomColor(),
    
23.         pgColor: randomColor()
    
24.     },function(ret,err){
    
25.         /* 进度自动步进. */
    
26.         ! function(id, value){
    
27.             setInterval(function(){
    
28. 
    
29.                 if(value > 100){
    
30.                     value %= 100;
    
31.                 }
    
32. 
    
33.                 arcProgress.setValue({
    
34.                     id: id,
    
35.                     value: value ++
    
36.                 });
    
37.             }, 100);
    
38.         }(ret.id, 0);
    
39.     });
    
40. }
    
41. 
    
42. // -----------------------------------
    
43. 
    
44. /* 产生一个随机 rgba 颜色值. */
    
45. function randomColor(){
    
46.     var alpha = random(10) / 10;
    
47. 
    
48.     if(alpha < 0.5){
    
49.         alpha = 0.5;
    
50.     }
    
51. 
    
52.     var rgba = "rgba(" + random(255) + ", " + random(255) +
    
53.         ", " + random(255) + ", " + alpha + ")";
    
54. 
    
55.     return rgba;
    
56. 
    
57.     // ---------------------------
    
58.     /* 产生 0 ~ max 的随机整数 */
    
59.     function random(max){
    
60.         return  Math.floor(Math.random() * (max + 1));
    
61.     }
    
62. }

复制代码

代码如上,复制粘贴可直接运行;
整体逻辑很简单:  每隔一段时间,让进度条自动步进, 超过 100% 后,自动取余,从0重新开始;

lalalalalala

多谢分享，然后我来领取回复+10

lions

学习一个。不错的

大爱杰伦

lalalalalala 发表于 2015-1-9 10:10
多谢分享，然后我来领取回复+10

     

qichen5210523

这个真心不错，谢谢分享！

yiimiao

学习了

vvor

多谢分享.

jack888

10币=1块钱呀

HanSon

学习了！！！

xiaohunzhang

真好，学习了