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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
js函数调用的方式
May 06 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 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
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python实现一个简单的验证码程序
2017/11/03 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python搜索算法原理及实例讲解
2020/11/18 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
网络技术支持面试题
2013/04/22 面试题
宿舍违规检讨书
2014/01/12 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
语文教学感言
2014/02/06 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
物业消防安全责任书
2014/07/23 职场文书
科技工作者先进事迹
2014/08/16 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers