From ed26398451877afd5cf94ddf94b04bb352eb88e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
 <3277200+sentsim@users.noreply.github.com>
Date: Sun, 19 Nov 2023 16:37:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20util=20=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/util.html | 90 ++++++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 39 deletions(-)
diff --git a/examples/util.html b/examples/util.html
index 432ca666..5d57c131 100644
--- a/examples/util.html
+++ b/examples/util.html
@@ -13,11 +13,10 @@ body{padding: 50px;}
 </head>
 <body>
 
-<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>
-
-<button class="layui-btn" lay-active2="e4">事件4</button>
+<button class="layui-btn" lay-on="e1">事件1</button>
+<button class="layui-btn" lay-on="e2">事件2</button>
+<button class="layui-btn" lay-on="e3">事件3</button>
+<button class="layui-btn" lay-active="e4">事件4</button>
 
 <hr>
 
@@ -43,10 +42,11 @@ body{padding: 50px;}
 
 <script src="../src/layui.js"></script>
 <script>
-layui.use(['util', 'layer'], function(){
+layui.use(['lay', 'util', 'layer'], function(){
   var $ = layui.$;
   var util = layui.util;
   var layer = layui.layer;
+  var lay = layui.lay;
 
   // 固定块
   util.fixbar({
@@ -56,7 +56,7 @@ layui.use(['util', 'layer'], function(){
     }, {
       type: 'help',
       icon: 'layui-icon-help'
-    }, { 
+    }, {
       type: 'cart',
       icon: 'layui-icon-cart',
       style: 'background-color: #FF5722;'
@@ -75,7 +75,7 @@ layui.use(['util', 'layer'], function(){
     on: { // 任意事件 --  v2.8.0 新增
       mouseenter: function(type){
         layer.tips(type, this, {
-          tips: 4, 
+          tips: 4,
           fixed: true
         });
       },
@@ -89,47 +89,59 @@ layui.use(['util', 'layer'], function(){
       // layer.msg(type);
     }
   });
-  
-  //倒计时
-  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] + '秒';
-    $('#test').html('距离2099年1月1日还有：'+ str);
-  });
-  
-  //某个时间在当前时间的多久前
-  var str = util.timeAgo(new Date(2017,7,15,2,58,0));
-  $('#test1').html('示例写于：'+ str);
-  
-  //处理属性 为 lay-active 的所有元素事件
-  util.event('lay-active', {
+
+
+  // 批量处理事件
+  util.on({
     e1: function(othis){
       alert(othis.html())
-    }
-    ,e2: function(othis){
+    },
+    e2: function(othis){
       alert(othis.html())
     }
-    ,e3: function(othis){
+  });
+
+  // 事件集的替换和增加
+  util.on({
+    e1: function(othis){ // 重置事件 e1
+      alert(othis.html() + ' - replace')
+    },
+    e3: function(othis){ // 增加事件 e3
       alert(othis.html())
     }
   });
-  
-  //测试是否重复绑定
-  util.event('lay-active', {
-    e1: function(othis){
-      alert(othis.html() + '新事件')
-    }
+
+  // 自定义触发事件的元素属性名、自定义触发事件的方式
+  util.on('lay-active', {
+    e4: layui.throttle(function(othis) {
+      layer.tips(othis.html(), this);
+    }, 3000) // 3s 内不重复执行
+  }, {
+    trigger: 'mouseenter'
   });
-  
-  //测试绑定新事件
-  util.event('lay-active2', {
-    e4: function(othis){
-      alert(othis.html())
+
+
+  // 倒计时
+  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('#test').html(str);
+      util.countdown.timer = inst.timer; // 记录当前定时器，以便在重复渲染时清除。实际使用时不常用
+    },
+    done: function(obj, inst){ // 计时完成
+      layer.msg('Time is up');
     }
   });
 
+  // 某个时间在当前时间的多久前
+  var str = util.timeAgo(new Date(2017,7,15,2,58,0));
+  $('#test1').html('示例写于：'+ str);
+
   // 转换日期格式
   var timer = null
   var toDateString = function (format) {
@@ -139,7 +151,7 @@ layui.use(['util', 'layer'], function(){
   timer = setInterval(() => {
     toDateString($('#test2').val())
   }, 50)
-  
+
 });
 </script>
 </body>
