layer弹出层倒计时关闭的实现方法
更新时间：2019年09月27日 15:43:44 作者：橙小光
今天小编就为大家分享一篇layer弹出层倒计时关闭的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
因为官方没有提供，只能自己实现了，包括按钮倒计时和标题倒计时，标题倒计时在注释部分：
<!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弹出层倒计时关闭的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Array的push与unshift方法都能给当前数组添加元素，不同的是，push是在末尾添加，而unshift则是在开头添加。2011-03-03
这篇文章主要为大家详细介绍了js+html5实现手机九宫格密码解锁功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要为大家详细介绍了JavaScript实现密码框输入验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
JavaScript是用来在数据被传输到服务前对html表单中输入的数据进行验证，使用javascript对用户输入的信息进行验证是项目必须的，下面小编给大家整理一些比较常用的javascript表单验证，需要的朋友可以参考下2015-08-08
本文主要介绍了JS和canvas实现俄罗斯方块的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
JS不能跨域，所以这里借助了jquery，真的可以实现获取IP地址,下面是示例代码，需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JavaScript控制网页层收起和展开效果的方法,涉及javascript操作网页元素动态效果的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
JS判断只能是数字和小数点，下面为大家介绍下使用JS对文本框值的判断,需要的朋友可以参考下2014-03-03
js给dropdownlist添加选项的小例子，需要的朋友可以参考一下2013-03-03
js页面跳转：本页面跳转,上一层页面跳转，最外层的页面跳转，下面为大家大家分享下不同页面之家的跳转问题，感兴趣的朋友可以学习下2013-08-08
最新评论