js 获取验证码 倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 获取验证码 倒计时</title>
<style>
.input-wrap{
background-color: #eee;padding: 40px;display: flex;height: 40px;margin-bottom: 20px;
}
.input-wrap input{
border:0;background:#fff;height: 100%;width: 320px;text-indent:15px;box-sizing: border-box;
}
.input-wrap button{
height: 100%;width: 120px;background:#a1a1a1;color: #fff;justify-content: center;align-items: center;display: flex;cursor: pointer;border: 0;
}
</style>
</head>
<body>
<div class="input-wrap">
<input type="text" placeholder="请输入验证码" class="codeInput">
<button class="codeBtn">获取验证码</button>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
let timer = -1
$('.codeBtn').on('click', function(){
let self = $(this)
let timing = 60, min = 1;
self.css({
'pointer-events': 'none',
'cursor': 'default',
'opacity': '.4',
})
self.html('重新获取(' + timing + 's)');
timer = setInterval(() => {
timing--
console.log(timing)
self.html('重新获取(' + timing + 's)');
console.log(timing < min)
if (timing < min) {
timing = 0
console.log(timing)
self.css({
'cursor': 'pointer',
'opacity': 1,
'pointer-events': 'initial'
})
clearInterval(timer)
self.text('发送验证码')
return false
}
}, 1000)
})
</script>
</body>
</html>