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 提交和设置表单的值
Dec 19 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
php 数据结构之链表队列
2017/10/17 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
Node.js文件操作详解
2014/08/16 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
班风口号
2014/06/18 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
爱国主题班会教案
2015/08/14 职场文书
关于 Python json中load和loads区别
2021/11/07 Python