html
button一定要给类型,否则如果是在表单中会自动提交刷新页面
<button type="button" class="get_code">获取验证码</button>
css
<style>
.get_code{
width: 115px;
margin-left: 5px;
font-size: 14px;
display: inline-block;
line-height: 40px;
text-align: center;
color: #ffffff;
background: #0078FF;
outline: none;
border: none;
}
</style>
js
在倒计时的时候button要禁止点击
<script>
$('.get_code').click(function() {
let count = 60;
const countDown = setInterval(() => {
if (count === 0) {
$('.get_code').text('重新发送').removeAttr('disabled');
$('.get_code').css({
background: '#0078FF',
color: '#ffffff',
});
clearInterval(countDown);
} else {
$('.get_code').attr('disabled', true);
$('.get_code').css({
background: '#f5f5f5',
color: '#999999',
});
$('.get_code').text(count + 's后可重新获取');
}
count--;
}, 1000);
});
</script>