美文网首页浏览器 / 网页前端
layer.msg弹窗 倒计时关闭

layer.msg弹窗 倒计时关闭

作者: 极品小猫 | 来源:发表于2020-05-12 16:00 被阅读0次

基于 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);
    }

相关文章

网友评论

    本文标题:layer.msg弹窗 倒计时关闭

    本文链接:https://www.haomeiwen.com/subject/phnbnhtx.html