页面元素之进度条

作者: 小疏林er | 来源:发表于2020-04-06 22:44 被阅读0次

页面元素之进度条
NProgress.js-页面加载进度条
页面元素之颜色
页面元素之按钮
页面元素之表单
页面元素之栅格
页面元素之动画
页面元素之徽章
页面加载进度条
（前端）面试300问之（4）页面元素隐藏的10种方式

1、使用

默认样式

(1). 首先要进行模块加载
<script type="text/javascript">
          layui.use(['element'],function(){
              var form =layui.form;
              var element = layui.element;
          })
</script>
(2). 对一个div添加class="layui-progress"，然后再内部再添加一个class="layui-progress-bar"的div即可。
lay-percent="10%":代表进度条的初始百分比。

代码：
<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="10%"></div>
</div>

2、其他属性

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

显示进度条比例

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

对进度条添加class=" layui-bg-red"即可。
<div class="layui-progress" lay-showPercent="true">
     <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
</div>
大号进度条

通过对父级元素追加layui-progress-big类即可。
<div class="layui-progress layui-progress-big" lay-showPercent="true">
   <div class="layui-progress-bar" lay-percent="80%"></div>
</div>

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="layui/layui.js" ></script>
        <link rel="stylesheet" href="layui/css/layui.css" />
        <script type="text/javascript">
            layui.use(['element'],function(){
                var form =layui.form;
                var element = layui.element;
            })
        </script>
    </head>
    <body>
        <h1 style="margin: 20px 50px; text-align: center;">默认进度条</h1>
        <div class="layui-progress">
          <div class="layui-progress-bar" lay-percent="10%"></div>
        </div>
        <h1 style="margin: 20px 50px; text-align: center;">显示比例 黑色 分数</h1>
        <div class="layui-progress" lay-showPercent="true">
          <div class="layui-progress-bar layui-bg-black" lay-percent="1/3"></div>
        </div>
        <h1 style="margin: 20px 50px; text-align: center;">显示比例 红色 百分数</h1>      
        <div class="layui-progress" lay-showPercent="yes">
          <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
        </div>
        <h1 style="margin: 20px 50px; text-align: center;">显示比例 绿色 整数 大个的</h1>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes">
          <div class="layui-progress-bar layui-bg-green" lay-percent="500"></div>
        </div>
        <h1 style="margin: 20px 50px; text-align: center;">不显示比例 绿色 百分数 大个的</h1>
        <div class="layui-progress layui-progress-big" >
          <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
        </div>
        <h1 style="margin: 20px 50px; text-align: center;">不显示比例 草绿色 百分数 大个的</h1>
        <div class="layui-progress layui-progress-big">
            <div class="layui-progress-bar" lay-percent="20%"></div>
        </div><br />
        <h1 style="margin: 20px 50px; text-align: center;">显示比例 橙色色 百分数 大个的</h1> 
        <div class="layui-progress layui-progress-big"lay-showPercent="true">
          <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
        </div><br />
        <h1 style="margin: 20px 50px; text-align: center;">显示比例 蓝色 分数 大个的</h1> 
        <div class="layui-progress layui-progress-big" lay-showPercent="true">
          <div class="layui-progress-bar layui-bg-blue" lay-percent="3/5"></div>
        </div>
    </body>
</html>

测试结果：

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});:产生一个提示框。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="layui/layui.js" ></script>
        <link rel="stylesheet" href="layui/css/layui.css" />
        <script type="text/javascript">
            layui.use(['layer','element'],function(){
                var layer =layui.layer;
                var element = layui.element;
                $(function(){
                    var setIn;
                    $('#btn_jia').click(function(){
                            var a=parseInt($('#p1').attr('lay-percent'));
                            if (a+10<100) {
                                element.progress('demo',a+10+'%');
                                $('#p1').attr('lay-percent',a+10+'%')
                            } else{
                                element.progress('demo','100%');
                                $('#p1').attr('lay-percent','100%')
                            }
                    })
                    $('#btn_jian').click(function(){
                            var a=parseInt($('#p1').attr('lay-percent'));
                            if (a-10>0) {
                                element.progress('demo',a-10+'%');
                                $('#p1').attr('lay-percent',a-10+'%')
                            } else{
                                element.progress('demo','0%');
                                $('#p1').attr('lay-percent','0%')
                            }
                    })
                    $('#btn_login').click(function(){
                            setIn = setInterval(function(){
                            var a=parseInt($('#p1').attr('lay-percent'));
                            var num = Math.random();
                            num=Math.floor(num*10)
                            if(a+num<100){
                                element.progress('demo',a+num +'%');
                                $('#p1').attr('lay-percent',a+num+'%')
                            }else{
                                element.progress('demo','100%');
                                $('#p1').attr('lay-percent','100%');
                                layer.msg('魔盒终于打开了，但是啥也没有！嘿嘿！', {icon: 6});
                                clearInterval(setIn);
                            }
                            return;
                        }, 1000);
                    })
                    $('#btn_stop').click(function(){
                        clearInterval(setIn)
                    })
                })
            })
        </script>
    </head>
    <body>
        <h1 style="text-align:center;margin-top: 100px;">生活本无趣，但别丢了有趣的心鸭！</h1>
        <br />
        <br />
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="demo">
          <div class="layui-progress-bar" id="p1" lay-percent="0%"></div>
        </div>
        <br />
        <br />
        <div style="text-align:center">
            <button class="layui-btn"id="btn_jia">涨点工资</button>
            <button class="layui-btn"id="btn_jian">少点烦恼</button>
            <button class="layui-btn"id="btn_login">开启魔盒</button>
            <button class="layui-btn"id="btn_stop">休息一下</button>
        </div>
    </body>
</html>

测试效果：

点击涨点工资按键：进度值增加10%

点击少点烦恼按键：进度值减少10%

点击开启魔盒按键：进度值每隔一秒随机增加1~10%的进度值。

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

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

页面元素之进度条
1、使用默认样式(1). 首先要进行模块加载 layui.use(['element'],f...
NProgress.js-页面加载进度条
NProgress.js提供页面加载进度条效果，当页面打开加载时，在页面顶部会出现进度条加载动画。NProgres...
页面元素之颜色
1、简介 layui为我们提供了一些颜色和功能之间的搭配，方便我们使用，她提供的颜色清新柔和，整体效果十分自热融洽...
页面元素之按钮
1、用法向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-b...
页面元素之表单
1、使用在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及...
页面元素之栅格
1、介绍 Layui将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/...
页面元素之动画
1、动画在实用价值的前提之下，layui并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发...
页面元素之徽章
1、基本使用徽章通常作为修饰性元素，与其他元素、模块组合使用（导航、选项卡等等），起到新消息提醒、计数等作用。l...
页面加载进度条
页面加载进度条安装配置 mian.js
（前端）面试300问之（4）页面元素隐藏的10种方式
标题：（前端）面试300问之（4）页面元素隐藏的10种方式一问题 1 如何将页面上的元素进行隐藏？ 2 问题分...