本帖最后由 mangoboy 于 2018-9-22 15:51 编辑
第一步:下载jquery.js 附:http://code.jquery.com/jquery-2.1.4.min.js 第二步:编写页面代码,引入jquery.min.js如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">// 第二步:换成你的本地jq资源路径
<script src="js/jquery.min.js"></script>
<body>
<input type="text" name="tel" placeholder="请输入你的手机号码" />
<input type="button" id="btn" value="获取验证码" />
</body>
</html>
第三步:
为你的发送验证码按钮绑定事件
<script type="text/javascript">
// 初始化倒计时时间
var countdown=60;
function sendMsmCode(){
var dom = $("#btn");
settime(dom);
}
//发送验证码倒计时
function settime(dom) {
// 倒计时结束出口
if (countdown == 0) {
dom.attr('disabled',false);
//dom.removeattr("disabled");
dom.val("获取验证码");
countdown = 60;
return;
} else {
// 正在倒计时中
dom.attr('disabled',true);
dom.val("重新发送(" + countdown + ")");
countdown--;
}
// 每一秒执行一次
setTimeout(function() {
settime(dom)
},1000)
}
</script>
效果如下:
点击前
点击后
|
|