邮箱验证前端代码（带定时器）
<!DOCTYPE html>
<html >
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>用户忘记密码</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="all,follow"><!-- Bootstrap CSS--><link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"><!-- Font Awesome CSS--><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"><!-- Google fonts - Popppins for copy--><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800"><!-- orion icons--><link rel="stylesheet" href="/css/orionicons.css"><!-- theme stylesheet--><link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet"><!-- Custom stylesheet - for your changes--><link rel="stylesheet" href="/css/custom.css"><!-- Favicon--><link rel="shortcut icon" href="/img/favicon.png?3"><!-- Tweaks for older IEs--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<!-- navbar--><div class="d-flex align-items-stretch"><div class="page-holder w-100 d-flex flex-wrap"><div class="container-fluid px-xl-5"><section class="py-5"><div class="row"><!-- Basic Form--><div class="col-lg-8 mb-5" style="margin:50px auto"><div class="card"><div class="card-header"><h3 class="h6 text-uppercase mb-0">Send Email</h3></div><div class="card-body"><form action="/forgetPasswordChange" method="post"><div class="form-group"><div><label class="form-control-label text-uppercase">邮箱</label></div><input type="text" id="email" placeholder="Email" class="form-control" style="width: 80%;display: inline-block"><button type="button" class="btn btn-primary" id="sendbtn" onclick="send()" style="width: 19%" >发送验证码</button></div><div class="form-group"><label class="form-control-label text-uppercase">验证码</label><input type="text" id="code" placeholder="Code" class="form-control"></div><div class="form-group" ><button type="submit" class="btn btn-primary" style="margin-left: 250px">确认</button><button type="button" id="exit" onclick="exitpwd()" class="btn btn-secondary" style="margin-left: 280px">返回</button></div></form></div></div></div></div></section></div></div>
</div>
<!-- JavaScript files-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper.js/umd/popper.min.js"> </script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="/vendor/chart.js/Chart.min.js"></script>
<script src="/js/js.cookie.min.js"></script>
<script src="/js/front.js"></script>
<script>anxia = false;miao = 60;var ding;var yan = document.getElementById("sendbtn");function send() {var email = document.getElementById("email").value;if (!anxia) {anxia = true;ding=setInterval(jian, 1000);} else {yan.disabled = true;}/*$.ajax({url:"/sendEmail" , // 请求路径type:"POST" , //请求方式data:{"email":email},success:function (data) {document.log("成功")},//响应成功后的回调函数dataType:"json"//设置接受到的响应数据的格式});
*/}function jian() {//alert(miao);if(miao>0){yan.innerText = (miao--) + "秒后再获取";}else{miao=60;clearInterval(ding);yan.innerText ="重新获取";yan.disabled = false;anxia = false;}}
</script>
</body>
</html>
这里需要引入bootstrap，页面才好看。效果如下：
点击之后的：
等60秒后的：
