JavaScript

超轻量级php框架startmvc

layer弹出层倒计时关闭的实现方法

更新时间:2020-09-16 16:12:01 作者:startmvc
因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部

因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部分:


<!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 弹出层 倒计时 关闭