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弹出层倒计时关闭的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
jquery $(document).ready()和window.onload的区别浅析
这篇文章主要介绍了jquery $(document).ready()和 window.onload的区别浅析,本文总结了执行时间、编写个数不同、简化写法等不同的地方,需要的朋友可以参考下2015-02-02
本文为大家详细介绍下js将long日期格式转换为标准日期格式,感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
这篇文章主要介绍了浅谈Webpack 持久化缓存实践,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
BootStrap中的模态框（modal，弹出层）功能示例代码
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。这篇文章主要介绍了BootStrap中的模态框（modal，弹出层）,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了JS模拟实现方法重载,涉及js基于arguments实现重载的相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JavaScript对象引用与赋值,结合实例形式分析了JavaScript对象引用及赋值的操作技巧与相关注意事项,需要的朋友可以参考下2017-03-03
本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
一般来说，我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成 采用的方法很类似2010-01-01
这篇文章主要向大家推荐了一个原生js模拟淘宝购物车项目实战，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论