html中layui
<div class="layui-inline">
<a class="layui-btn layui-btn-normal searchBtn layui-bg-green" id="searchBtn">搜索</a>
</div>
js操作
// (function () {
var flag = true;
var count = 20;
var timer;
$('#searchBtn').on('click', function () {
if (count == 0) {
flag = true;
}
if (flag == true) {
popUpConfirm();
} else { //已经点击
hasClicked();
}
})
//)();
弹出提示框
flag判断按钮是否可用;
count:是初始化禁用时间;
timer是计时器
function popUpConfirm() {
layer.confirm('因数据量比较大,查询时请耐心等待,不要重复点击', {
btn: ['确定', '取消'] //按钮
}, function (popIndex) {
flag = false;
count = 20;
if (timer == undefined) {
timer = setInterval(function () {
if (count > 0) {
count--;
// console.log(timer, flag, count);
} else {
flag = true;
clearInterval(timer);
timer = null;
}
}, 1000);
}
tavlelsReload(1, popIndex);
});
}
当按钮禁用时,对用户进行提示
function hasClicked() {
if (count == 20) {
layer.confirm('您点击过快,请在' + count + '秒后再次尝试查询', {
btn: ['确定'] //按钮
})
} else {
if (count < 0) {
flag = true;
count = 20;
clearInterval(timer);
timer = null;
} else {
layer.confirm('您点击过快,请在' + count + '秒后再次尝试查询', {
btn: ['确定'] //按钮
})
}
}
}