<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layui.css"/>
</head>
<body>
<div class="box">
<button type="button" class="layui-btn" id="btn">按钮</button>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="layui.all.js"></script>
<script>
var data={
textbefor:'获取验证码吧', //按钮默认文字
time:15, //计时秒数
istrigger:'click', //触犯方法
isdoingcl:'false', //计时正在进行是否可以点击
textafter:'重新获取验证码' //计时结束文字
}
isbundfun(data);
function isbundfun(data){
data._time = data.time;
$('#btn').text(data.textbefor)
if(data.istrigger=='render'){
fun(data);
}
$("body").on("click","#btn",function(){
let tx = $(this).text();
console.log('=='+tx);
if(data.isdoingcl=='false' && tx > 0){
console.log('正在倒计时默认不能点击');
}else if(data.isdoingcl == 'true' && tx > 0){
layer.msg("正在倒计时,干点啥",{icon:0,time:2000});
}else{
fun(data);
}
})
}
function fun(data){
console.log(data.time);
if (data.time == 0) {
data.time = data._time
$('#btn').text(data.textafter)
$('#btn').removeClass('layui-btn-disabled')
return;
} else {
data.time--;
$('#btn').text(data.time);
$('#btn').addClass('layui-btn-disabled')
}
setTimeout(function() {
fun(data);
},1000);
}
</script>
</body>
</html>