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通用函数
May 09 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 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正则表达式(regar expression)
2011/09/10 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
javascript常用函数(1)
2015/11/04 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python中os模块详解
2016/10/14 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
销售主管岗位职责范本
2014/02/14 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS