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 DOM节点元素的方法的总结
Aug 21 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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编程中八种常见的文件操作方式
2006/11/19 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php网站地图生成类示例
2014/01/13 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
详解PHP队列的实现
2019/03/14 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python发送邮件功能实现代码
2016/07/15 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python输入多行字符串的方法总结
2019/07/02 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
详解python的变量缓存机制
2021/01/24 Python
新闻记者个人求职的自我评价
2013/11/28 职场文书
初一新生军训方案
2014/05/22 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
建筑横幅标语
2014/10/09 职场文书
入党函调证明材料
2014/12/24 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记