效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>message</title>
</head>
<body>
<input type="text" name="phone"></input>
<input type="button" value="发送短信"></input>
<script type="text/javascript">
var inp = document.getElementsByTagName('input'); //获取发送短信按钮
var sec = 10; //设置发送时间
var timer; //设置一个计时器
var flag = 1; //做一个标记量,如果户没有点击的时候,标记变量为1;如果用户点击了,标记变量设为0
inp[1].onclick = function()
{
if (flag == 1) {
var _this = this;
timer = setInterval(function(){
sec--;
if (sec <=0 ) {
flag = 1;
sec = 10;
_this.value = '重新发送验证码';
clearInterval(timer);
} else {
flag = 0;
_this.value = sec + '秒后重新发送';
}
},1000);
}
}
</script>
</body>
</html>
说明:
以上均是前端的实现,后端代码日后会推送