加载中…
个人资料
iPan
iPan
  • 博客等级:
  • 博客积分:0
  • 博客访问:7,697
  • 关注人气:234
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

layui——util模块

(2018-03-01 13:17:12)
标签:

layui

分类: 前端开发
1 右下角固定块
语法:util.fixbar(options) 
参数                 类型                         描述
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

TOP按钮,示例:
var util = layui.util;
util.fixbar(); // 不设参数,默认是滚动200px会自动显示top按钮;

小结
fixbar允许用户自定义2个按钮(默认是信息、问号图标),还有一个top按钮是默认就有的,top按钮通过showHeight控制在什么时候显示;按钮1、按钮2通过bar1、bar2控制是否显示;click事件返回的type类型可以判断单击的是哪个按钮;
这块功能很实用,特别是top按钮,自定义按钮只能2个这点不灵活,但是一般场景够用!

2 倒计时
语法:util.countdown(endTime, serverTime, callback)
参数 说明
endTime 结束时间戳或Date对象,如:4073558400000,或:new Date(2099,1,1).
serverTime 当前服务器时间戳或Date对象
callback 回调函数。每一秒都会执行一次,并且返回三个参数: date(包含天/时/分/秒的对象)、 serverTime(当前服务器时间戳或Date对象), timer(计时器返回的ID值,用于clearTimeout)

示例
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);
});

3 某个时间在当前时间的多久前
某个时间在当前时间的多久前。 
参数 time:即为某个时间的时间戳或日期对象 
参数 onlyDate:是否在超过30天后,只返回日期字符,而不返回时分秒 

如果在3分钟以内,返回:刚刚 
如果在30天以内,返回:若干分钟前、若干小时前、若干天前,如:5分钟前 
如果在30天以上,返回:日期字符,如:2017-01-01
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);
}
});

说明:在发帖场景中有用到,可以显示当前帖子的发送时间;

4 日期时间转字符串
util.toDateString(time, format)
转化时间戳或日期对象为日期格式字符 
参数 time:可以是日期对象,也可以是毫秒数 
参数 format:日期字符格式(默认:yyyy-MM-dd HH:mm:ss),可随意定义,如:yyyy年MM月dd日

5 数字前置补零
util.digit(num, length)
参数 num:原始数字
参数 length:数字长度(默认2),如果原始数字长度小于 length,则前面补零,如:util.digit(7, 3) //007

参考官方文档:http://www.layui.com/doc/

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有