- 固定块
- 倒计时
- 其它方法

-

#  工具集文档 - layui.util

> 我们将一些工具性元素放入 util 模块中，以供选择性使用。其内部由多个小工具组件组成，他们也许不是必须的，但很多时候却能为你的页面提供良好的辅助作用。

> 模块加载名称：util

固定块

语法：util.fixbar(options)
其中参数 options 是一个对象，可支持的key如下表：

参数 | 类型 | 描述
--- | --- | ---
bar1 | Boolean/String | 默认false。如果值为true，则显示第一个bar，带有一个默认图标。 如果值为图标字符，则显示第一个bar，并覆盖默认图标
bar2 | Boolean/String | 默认false。如果值为true，则显示第二个bar，带有一个默认图标。 如果值为图标字符，则显示第二个bar，并覆盖默认图标
bgcolor | String | 自定义区块背景色
showHeight | Number | 用于控制出现TOP按钮的滚动条高度临界值。默认：200
css | Object | 你可以通过重置bar的位置，比如 css: {right: 100, bottom: 100}
click | Function | 点击bar的回调，函数返回一个type参数，用于区分bar类型。 支持的类型有：bar1、bar2、top

    layui.use('util', function(){
      var util = layui.util;

      //执行
      util.fixbar({
        bar1: true
        ,click: function(type){
          console.log(type);
          if(type === 'bar1'){
            alert('点击了bar1')
          }
        }
      });
    });

倒计时

这是一个精致的封装，它并不负责视图的呈现，而仅返回倒计时数值，这意味着你可以将它应用在任何倒计时相关的业务中。

语法：util.countdown(endTime, serverTime, callback)

参数 | 说明
--- | ---
endTime | 结束时间戳或Date对象，如：4073558400000，或：new Date(2099,1,1).
serverTime | 当前服务器时间戳或Date对象
callback | 回调函数。如果倒计时尚在运行，则每一秒都会执行一次。并且返回三个参数： date（包含天/时/分/秒的对象）、 serverTime（当前服务器时间戳或Date对象）, timer（计时器返回的ID值，用于clearTimeout）

    <div id="test"></div>

    <script>
    layui.use('util', function(){
      var util = layui.util;

      //示例
      var endTime = new Date(2099,1,1).getTime() //假设为结束日期
      ,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

      util.countdown(endTime, serverTime, function(date, serverTime, timer){
        var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
        layui.$('#test').html('距离2099年1月1日还有：'+ str);
      });
    });
    </script>

其它方法

方法 | 说明
--- | ---
util.timeAgo(time, onlyDate) | 某个时间在当前时间的多久前。 参数 time：即为某个时间的时间戳或日期对象 参数 onlyDate：是否在超过30天后，只返回日期字符，而不返回时分秒 如果在3分钟以内，返回：刚刚 如果在30天以内，返回：若干分钟前、若干小时前、若干天前，如：5分钟前 如果在30天以上，返回：日期字符，如：2017-01-01
util.toDateString(time, format) | 转化时间戳或日期对象为日期格式字符 参数 time：可以是日期对象，也可以是毫秒数 参数 format：日期字符格式（默认：yyyy-MM-dd HH:mm:ss），可随意定义，如：yyyy年MM月dd日
util.digit(num, length) | 数字前置补零 参数 num：原始数字 参数 length：数字长度，如果原始数字长度小于 length，则前面补零，如：util.digit(7, 3) //007
util.escape(str) | 转义 xss 字符 参数 str：任意字符

util.event(attr, obj, eventType)

用于更好地批量处理事件。
参数 attr：绑定需要监听事件的元素属性
参数 obj：事件回调链
参数 eventType：事件类型（默认 click）
示例：

    HTML：
    <button class="layui-btn" lay-active="e1">事件1</button>
    <button class="layui-btn" lay-active="e2">事件2</button>
    <button class="layui-btn" lay-active="e3">事件3</button>

    JavaScript：
    <script>
    layui.use('util', function(){
      var util = layui.util;

      //处理属性 为 lay-active 的所有元素事件
      util.event('lay-active', {
        e1: function(othis){
          alert('触发了事件1');
        }
        ,e2: function(othis){
          alert('触发了事件2');
        }
        ,e3: function(othis){
          alert('触发了事件3');
        }
      });
    });
    </script>

结语

工具模块往往应用在边边角角，将不定期增加。

layui - 在每一个细节中，用心与你沟通