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

前端之家收集整理的这篇文章主要介绍了layer弹出层倒计时关闭的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<!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>

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


以上这篇layer弹出层倒计时关闭实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

原文链接:https://www.f2er.com/js/526266.html

猜你在找的JavaScript相关文章