这篇博客展示了如何使用jQuery实现一个常见的功能：当用户点击获取验证码按钮后，按钮变为不可点击并开始倒计时，倒计时结束后按钮恢复可点击状态并显示初始文本。代码中详细解释了JavaScript和jQuery的实现过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">获取验证码</button>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
// 需求：点击按钮，按钮变得不可点击，开始读秒s，s秒后按钮变回可点击状态，文本显示获取验证码
/*
原生js
btn.οnclick=function(){
this.disabled = true;
var s = 5;
var _this = this;
var timer = setInterval(function(){
// 定时器中的this指向window
// console.log(_this);
_this.innerText = --s +"秒后再点击";
},1000)
setTimeout(function(){
// s秒后....
clearInterval(timer);
_this.innerText = "获取验证码";
_this.disabled = false;
},s*1000)
} */
// jQuery实现
$("#btn").click(function () {
$(this).prop("disabled", true);
var s = 5;
var timer = setInterval(function () {
$("#btn").text(--s + "秒后再点击");
}, 1000)
setTimeout(function () {
// s秒后....
clearInterval(timer);
$("#btn").text("获取验证码");
$("#btn").prop("disabled", false);
}, s * 1000)
})
</script>
</body>
</html>
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
