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函数
Oct 16 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
React快速入门教程
Jan 17 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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日历类分享
2014/11/18 PHP
php微信开发之上传临时素材
2016/06/24 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
几个高效,简洁的字符处理函数
2007/04/12 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
我爱我家教学反思
2014/05/01 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
计算机实训心得体会
2016/01/14 职场文书
外出考察学习心得体会
2016/01/18 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
A22国内电台短波广播频率表
2022/05/10 无线电