主页 / 网络编程 /

layer弹出层倒计时关闭的实现方法

网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇layer弹出层倒计时关闭的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script src="https://cdn.bootcss./jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss./layer/2.3/layer.js"></script>
    <script>
    function func1() {
        var i = 9;
        var interval;
        layer.confirm('是否提交？', {
          btn: [i+1+'s后可提交','退出'], //按钮
          skin: 'layui-layer-molv',
          suess: 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>

以上这篇layer弹出层倒计时关闭的实现方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：JavaScript实现随机五位数验证码 下一篇：layer.alert自定义关闭回调事件的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by