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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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
天津市收音机工业发展史
2021/03/04 无线电
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
浅谈python中的数字类型与处理工具
2017/08/02 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python实现简单加密解密机制
2019/03/19 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
军训教官感言
2014/03/02 职场文书
法律进学校实施方案
2014/03/15 职场文书
租房协议书怎么写
2014/04/10 职场文书
设计顾问服务计划书
2014/05/04 职场文书
中学团支部工作总结
2015/08/13 职场文书
小学英语新课改心得体会
2016/01/22 职场文书