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 相关文章推荐
document.all与WEB标准
May 13 Javascript
JavaScript中的其他对象
Jan 16 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
实例详解Node.js 函数
Jun 10 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Javascript----文件操作
2007/01/18 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
JS中数据结构之栈
2019/01/01 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
js实现简单的打印表格
2020/01/15 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
会计大学生职业生涯规划书范文
2014/01/13 职场文书
护士进修自我鉴定
2014/02/07 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
校长新学期致辞
2015/07/30 职场文书
2016寒假假期总结
2015/10/10 职场文书
2019感恩宣传标语!
2019/07/05 职场文书