美文网首页程序员
layer弹出层倒计时关闭实现

layer弹出层倒计时关闭实现

作者: 橙小光 | 来源:发表于2018-01-12 14:26 被阅读0次

    因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部分:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
            <script>
            function func1() {
                    var i = 9;
                    var interval;
                    layer.confirm('是否提交?', {
                        btn: [i+1+'s后可提交','退出'], //按钮
                        skin: 'layui-layer-molv',
                        success: function(a,b){
                            $(".layui-layer-btn0").css("backgroundColor","#92B8B1");
                            var fn = function() {
                //              layer.title(i+' 秒后,系统将自动退出并关闭。',b);
                                $(".layui-layer-btn0").text(i+'s后可提交');
                                i--;
                            };
                            interval = setInterval(function(){
                                    fn();
                                    if(i === 0){
                                        $(".layui-layer-btn0").css("backgroundColor","#019F95");
                                        $(".layui-layer-btn0").text('提交');
                                        clearInterval(interval);
                                    }
                                }, 1000);
                        },
                        end:function(){
                            clearInterval(interval);
                        }
                        }, function(){
                            if(i<=0) {
                                     layer.msg('已提交', {icon: 1});
                                }
                    
                        }, function(){
                            clearInterval(interval);
                              layer.msg('已关闭', {icon: 1});
                        
                        });
                }
            </script>
            <button id="func1" onclick="func1();">询问框</button>
        </body>
    </html>
    
    image.png

    可以直接运行。(依赖jquery.js和layer.js。)

    相关文章

      网友评论

        本文标题:layer弹出层倒计时关闭实现

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