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 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
js数组去重的方法总结
Jan 18 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
React Native 截屏组件的示例代码
2017/12/06 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python时间获取及转换知识汇总
2017/01/11 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python Map 函数的使用
2020/08/28 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
Android面试宝典
2013/08/06 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
高级编程求职信模板
2014/02/16 职场文书
保安公司服务承诺书
2014/05/28 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers