基于 layer 弹出层进行增强操作,实现倒计时执行任务的需求。
分两部分功能,增强、原生。
增强仅为实现单一的倒计时任务的需求,倒计时可执行倒计时的任务。
原生部分的功能,如果没有需要可以忽略参数,也可以根据自身的使用需求进行更多扩展。
/****** layer.msg 弹窗倒计时说明
*** 增强部分 ***
* second : 倒计时时间,单位,秒
* content: 弹窗内容,类型;String
* title: msg的标题,留空则不显示标题
* delayFn: 倒计时结束后执行的事件
*
*** 原生部分(可忽略) ***
* msgTime: msg 的显示时间,留空则默认值为0,倒计时结束自动关闭msg
* layerFn: msg 显示完成后执行的事件
*
******/
function msgTimer(second, content, title, delayFn, msgTime, layerFn}){
layer.msg(content, {
time : msgTime||0,
title : title||'',
//shade: 0.6,
success: function(layero, index){
var msg = layero.text();
var msgbody = layero.find(".layui-layer-content");
var i = second;
var timer = null;
var msgfn = function() {
msgbody.text(msg + ' ' + i + ' ');
if(!i) {
layer.close(index);
clearInterval(timer);
delayFn();
}
i--;
};
timer = setInterval(msgfn, 1000);
msgfn();
},
}, layerFn);
}
网友评论