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


Posted in Javascript onSeptember 27, 2019

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

<!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弹出层倒计时关闭的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 #Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 #Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 #Javascript
微信小程序 冒泡事件原理解析
Sep 27 #Javascript
JavaScript实现背景自动切换小案例
Sep 27 #Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
vue实现文字加密功能
Sep 27 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
做网页的一些技巧
2007/02/01 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
详解Vue方法与事件
2017/03/09 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
Django视图和URL配置详解
2018/01/31 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
学习退步检讨书
2014/09/28 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
《所见》教学反思
2016/02/23 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python