页面元素之进度条

1、使用

• 默认样式

(1). 首先要进行模块加载

(2). 对一个div添加class="layui-progress"，然后再内部再添加一个class="layui-progress-bar"的div即可。
lay-percent="10%":代表进度条的初始百分比。

• 代码：

2、其他属性

默认样式过于简单，我们可以对进度条进行调整颜色、尺寸、显示进度比例等操作。

• 显示进度条比例

通过对父级元素设置属性 lay-showPercent="yes"来开启进度比的文本显示，支持：普通数字、百分数、分数。
注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes、true等等。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

• 更改颜色

对进度条添加class=" layui-bg-red"即可。

• 大号进度条

通过对父级元素追加layui-progress-big类即可。

• 代码：

    
        
        
        
        
        
        
    
    
        
默认进度条
        

          

        
        
显示比例 黑色 分数
        

          

        
        
显示比例 红色 百分数
      
        

          

        
        
显示比例 绿色 整数 大个的
        

          

        
        
不显示比例 绿色 百分数 大个的
        

          

        
        
不显示比例 草绿色 百分数 大个的
        

            

        

        
显示比例 橙色色 百分数 大个的
 
        

          

        

        
显示比例 蓝色 分数 大个的
 
        

          

        
    

• 测试结果：

image.png

3、加点好玩的（动态操作）

进度条不光可以静态加载，也可以动态操作，本例中，添加了四个按钮，对其添加了click（）事件，通过点击不同的按钮来实现不同的效果。本例选择元素时用到了jQuery，请加载layui.js、layui.css时一并加载。

• attr（'属性名'）：获得属性值
• element.progress('demo',a+10+'%')：官方提供的修改进度值的方法（进度条元素div需要lay-filter="demo"属性否则无效）。
  *$('#p1').attr('lay-percent',a+10+'%')：使用过element.progress（）方法后一定要将lay-percent属性一并修改，否则进度条会增加，但是显示的值不会变动。
• var setIn = setInterval(function(){}, time(毫秒)）：这个函数是每间隔一段time长的时间便会执行function(){}方法（本例中每隔一秒时间便增加进度值，来模仿登录效果）。
• clearInterval(setIn):停止运行setInterval方法。
• var num = Math.random();:返回介于 0.0 ~ 1.0 之间的一个随机数。以此来模仿登录时无规律增加进度条。
• num=Math.floor(num*10)：将产生的小数变成1~10的整数。
• layer.msg('魔盒终于打开了，但是啥也没有！嘿嘿！', {icon: 6});:产生一个提示框。

代码：

    
        
        
        
        
        
        
    
    
        
生活本无趣，但别丢了有趣的心鸭！
        

        

        

          

        
        

        

        

            涨点工资
            少点烦恼
            开启魔盒
            休息一下
        
    

测试效果：

• 点击涨点工资按键：进度值增加10%
• 点击少点烦恼按键：进度值减少10%
• 点击开启魔盒按键：进度值每隔一秒随机增加1~10%的进度值。

• 点击休息一下按键：进度值不在随机增加（类似于暂停）。

  
  
  没开启的魔盒.png
  
  
  开启中的魔盒.png
  
  
  s
  开启成功魔盒.png