工具模块

工具模块 util 是由工具类方法和小组件组成的集合。

示例

  <h3 class="ws-anchor ws-bold">倒计时</h3>
请选择要计算的日期：
<div class="layui-inline">
  <input type="text" readonly class="layui-input" id="test1" value="2099-12-31 00:00:00">
</div>
<span class="layui-word-aux layui-font-green" id="test2"></span>
<h3 class="ws-anchor ws-bold">某个时间在多久前</h3>
请选择要计算的日期：
<div class="layui-inline">
  <input type="text" readonly class="layui-input" id="test3">
</div>
<span class="layui-word-aux" id="test4"></span>
  
<h3 class="ws-anchor ws-bold">转换日期格式</h3>
请编辑格式：
<div class="layui-inline">
  <input type="text" value="yyyy-MM-dd HH:mm:ss" class="layui-input" id="test5">
</div>
<span class="layui-word-aux" id="test6"></span>
  
<h3 class="ws-anchor ws-bold">转义 HTML</h3>
<div class="layui-form">
  <textarea class="layui-textarea" id="test7">
<h3>HTML Title</h3>
<script>
  alert(0);
</script>
  </textarea>
</div>
<div class="layui-btn-container" style="margin-top: 10px;">
  <button class="layui-btn" lay-on="escape">转义</button>
  <button class="layui-btn" lay-on="unescape">还原</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var util = layui.util;
  var laydate = layui.laydate;
  var layer = layui.layer;
  var $ = layui.$;
  // 倒计时
  var countdown = util.countdown({
    date: '2099-12-31 00:00:00', // 目标时间值
    now: new Date(), // 当前时间，一般为服务器时间，此处以本地时间为例
    ready: function(){ // 初始操作
      clearTimeout(util.countdown.timer); // 清除旧定时器，防止多次渲染时重复执行。实际使用时不常用
    },
    clock: function(obj, inst){  // 计时中
      var str = [obj.d,'天',obj.h,'时',obj.m,'分',obj.s,'秒'].join(' ');
      lay('#test2').html(str);
      util.countdown.timer = inst.timer; // 记录当前定时器，以便在重复渲染时清除。实际使用时不常用
    },
    done: function(obj, inst){ // 计时完成
      layer.msg('Time is up');
    }
  });
  // 重置倒计时
  laydate.render({
    elem: '#test1',
    type: 'datetime',
    done: function(value){
      countdown.reload({
        date: value
      });
    }
  });
  
  
  // 某个时间在多久前
  var setTimeAgo = function(y, M, d, H, m, s){
    var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0, s||0));
    lay('#test4').html(str);
  };
  laydate.render({
    elem: '#test3',
    type: 'datetime',
    done: function(value, date){
      setTimeAgo(
        date.year, 
        date.month - 1, 
        date.date, 
        date.hours, 
        date.minutes, 
        date.seconds
      );
    }
  });
  
  // 转换日期格式
  var toDateString = function(format){
    var dateString = util.toDateString(new Date(), format); // 执行转换日期格式的方法
    $('#test6').html(dateString);
  };
  toDateString($('#test5').val());
  // 输入框事件
  $('#test5').on('input propertychange', function(){
    toDateString(this.value);
  });
  
  // HTML 转义
  util.event('lay-on', {
    escape: function(){ // 转义
      var textarea = $('#test7');
      var value = textarea.val();
      var str = util.escape(value); // 执行转义方法
      textarea.val(str);
    },
    unescape: function(){
      var textarea = $('#test7');
      var value = textarea.val();
      var str = util.unescape(value); // 执行转义方法
      textarea.val(str);
    }
  });
  
});
</script>
  

API

倒计时

util.countdown(options);

• 参数 options ^2.8.9+: 属性配置项。可选项详见下表：

• 注： ^2.8.9 之前的版本写法为：util.countdown(date, now, clock);

该方法返回的实例对象成员如下 ^2.8.9+：

var countdown = util.countdown(options);
countdown.clear(); // 清除当前倒计时
countdown.reload(options); // 重载当前倒计时。
countdown.timer; // 当前倒计时计时器 ID

相关用法可参考：#示例

layui.use('util', function(){
  var util = layui.util;
  // 示例
  util.countdown({
    date: '2099-1-1', // 目标时间值
    now: new Date(), // 当前时间，一般为服务器时间，此处以本地时间为例
    clock: function(obj, countdown){ // 计时中
      console.log(obj); // 得到当前计时器的「天、时、分、秒」值
      console.log(countdown); // 得到当前实例对象
    },
    done: function(obj, countdown){ // 计时完成
      console.log('time is up');
    }
  });
});

某个时间在多久前

var result = util.timeAgo(time, onlyDate);

• 参数 time : 某个时间的毫秒数或日期对象
• 参数 onlyDate : 是否在超过 30 天后，只返回日期字符，而不返回时分秒

返回结果

• 若 time 在 3 分钟以内，返回： 刚刚
• 若 time 在 30 天以内，返回： 若干分钟前、若干小时前、若干天前，如：5 分钟前
• 若 time 在 30 天以上，返回： 日期字符，如： 2023-01-01

var result = util.timeAgo(1672531200000); // 2023-01-01 00:00:00

相关效果见：#示例

转换日期格式字符

var result = util.toDateString(time, format, options);

• 参数 time : 毫秒数或日期对象
• 参数 format : 日期字符格式。默认格式：yyyy-MM-dd HH:mm:ss 。可自定义，如： yyyy年MM月dd日
• 参数 options ^2.8.13+ : 该方法的属性可选项，详见下表：

var result = util.toDateString(1672531200000, 'yyyy-MM-dd'); // 2023-01-01
// 中括号中的字符会原样保留 2.8.13+
var result2 = util.toDateString(new Date('2023-01-01 11:35:25'), 'ss[s]'); // 25s
// 自定义 meridiem
var result3 = util.toDateString(
  '2023-01-01 11:35:25',
  'hh:mm:ss A',
  {
    customMeridiem: function(hours, minutes){
      return (hours < 12 ? 'AM' : 'PM')
        //.split('').join('.') // 有句点，A.M.
        //.toLowerCase() // 小写，a.m.
    }
  }
); // 11:35:25 AM

参数 format 所有可用的格式列表 :

数字前置补零

util.digit(num, length);

• 参数 num : 原始数字
• 参数 length : 数字长度，如果原始数字长度小于 length，则前面补零

该方法返回一个 string 类型的结果，如：

var rs1 = util.digit(6, 2); // "06"
var rs2 = util.digit(7, 3); // "007"

转义和还原 HTML

• util.escape(str); 转义 HTML
• util.unescape(str); 还原被转义的 HTML

参数 str : 任意 HTML 字符

var str1 = util.escape('<div>123</div>'); // 返回： &lt;div&gt;123&lt;/div&gt;
var str2 = util.unescape('&lt;div&gt;123&lt;/div&gt;'); // 返回： <div>123</div>

打开浏览器新标签页 ^2.8+

util.openWin(options);

• 参数 options : 属性配置项。可选项详见下表

该方法基于原生 window.open() 的二次封装，以提升打开浏览器窗口的灵活性。

// 打开一个 url
util.openWin({
  url: 'https://cn.bing.com'
});
// 打开一个自定义内容窗口
util.openWin({
  content: 'Hello World.'
});

批量事件处理

util.on(attr, events, options);

参数 options 可选项:

  <div class="layui-btn-container">
  <button class="layui-btn" lay-on="e1">事件 1</button>
  <button class="layui-btn" lay-on="e2">事件 2</button>
  <button class="layui-btn" lay-active="e3">事件 3</button>
</div>
<!-- import layui -->
<script>
layui.use('util', function(){
  var util = layui.util;
  //  2.9+ 版本可省略 attr 参数，默认读取 lay-on
  util.on({
    e1: function(){
      console.log(this); // 当前触发事件的 DOM 元素
      layer.msg('触发了事件 1');
    },
    e2: function(){
      layer.msg('触发了事件 2');
    }
  });
   // 自定义：触发事件的元素属性名、触发事件的方式
  util.on('lay-active', {
    e3: layui.throttle(function(othis) {
      console.log(this);
      layer.tips(othis.html(), this);
    }, 3000) // 3s 内不重复执行
  }, {
    trigger: 'mouseenter' // 鼠标移入时触发事件
  });
});
</script>