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

 更新时间:2019年09月27日 15:43:44   作者:橙小光  
今天小编就为大家分享一篇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弹出层倒计时关闭的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 滚动条的监听与内容随着滚动条动态加载的实现

    滚动条的监听与内容随着滚动条动态加载的实现

    下面小编就为大家带来一篇滚动条的监听与内容随着滚动条动态加载的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • javascript 得到文件后缀名的思路及实现

    javascript 得到文件后缀名的思路及实现

    在上传文件时,常常要对文件的类型即对文件的后缀名进行判断,用javascript可以很容易的做到这一点。用Javascript解析一个带绝对路径的文件名并得到后缀名的方法有很多种,这里列出一种,以供参考。
    2013-07-07
  • 认识延迟时间为0的setTimeout

    认识延迟时间为0的setTimeout

    由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。
    2008-05-05
  • JavaScript如何利用Promise控制并发请求个数

    JavaScript如何利用Promise控制并发请求个数

    大家都知道js是单线程,并不存在真正的并发,但是由于JavaScript的Event Loop机制,使得异步函数调用有了“并发”这样的假象。这篇文章主要给大家介绍了关于JavaScript如何利用Promise控制并发请求个数的相关资料,需要的朋友可以参考下
    2021-05-05
  • JavaScript setInterval()与setTimeout()计时器

    JavaScript setInterval()与setTimeout()计时器

    这篇文章主要介绍了JavaScript setInterval()与setTimeout()计时器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • bootstrap基础知识学习笔记

    bootstrap基础知识学习笔记

    这篇文章主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • javascript禁用Tab键脚本实例

    javascript禁用Tab键脚本实例

    这篇文章主要介绍了javascript禁用Tab键的脚本实例,很实用,大家参考使用吧
    2013-11-11
  • js 点击a标签 获取a的自定义属性方法

    js 点击a标签 获取a的自定义属性方法

    下面小编就为大家带来一篇js 点击a标签 获取a的自定义属性方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js canvas实现QQ拨打电话特效

    js canvas实现QQ拨打电话特效

    这篇文章主要为大家详细介绍了js canvas实现QQ拨打电话特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • layui的数据表格+springmvc实现搜索功能的例子

    layui的数据表格+springmvc实现搜索功能的例子

    今天小编就为大家分享一篇layui的数据表格+springmvc实现搜索功能的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论