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 相关文章推荐
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
js+css3实现炫酷时钟
Aug 18 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
php显示页码分页类的封装
2017/06/08 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
web 页面分页打印的实现
2009/06/22 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python IDLE入门简介
2017/12/08 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
模具设计与制造专业推荐信
2014/02/16 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
个人年底工作总结
2015/03/10 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android