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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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加Nginx实现动态裁剪图片方案
2014/03/10 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
临床医学应届生求职信
2013/11/06 职场文书
设计师个人求职信范文
2014/02/02 职场文书
销售会计岗位职责
2014/03/15 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2014年度考核工作总结
2014/12/24 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
《观察物体》教学反思
2016/02/17 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle