前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.js"></script>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="layui/layui.js"></script>
</head>
<body>
<form class="layui-form" action="" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">验证码:</label>
<div class="layui-input-inline">
<input type="text" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
</div>
<div>
<img src="/LiuYanCodeServlet" id="yzm" style="height: 37px;width:80px">
<span id="msg">点击图片刷新</span>
</div>
</div>
</form>
<script >
var num = 0;
var wait = 60;
var pass = true;
//验证码 点击刷新 每三次后锁定60秒
$(function () {
var fun = $("#yzm").click(function(){
var time = new Date().getTime();
//选中img标签，将属性设置为验证码路径。一定要加随机数，否则会认为请求相同不做处理
//获取刷新次数
if (num < 3) {
$(this).attr("src","LiuYanCodeServlet?"+time);
$("#msg").text("点击图片刷新").css("color","black");
} else {
setTimeout(fun,60000); //每次点击60秒后才能再次点击
$("#msg").text("请"+wait+"秒后在刷新").css("color","red");
pass = false;
}
console.log('num',num);
++num;
});
setInterval(function(){
console.log('wait',wait);
console.log('pass',pass);
//锁定 倒计时
if (pass == false) {
if(wait==0){
//计时结束，数据恢复
wait = 60;
num = 0;
pass = true;
$("#msg").text("点击图片刷新").css("color","black");
}else{
$("#msg").text("请"+wait+"秒后在刷新").css("color","red");
wait--;
}
}
}, 1000);
});
</script>
</body>
</html>
