HTML代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>短信验证码倒计时</title>
<link type="text/css" rel="stylesheet" href="css1.css"/>
<script src="../jquery.js"></script>
<script>$(function(){
$('.sentBtn').click(function(){
var i=60;
var timer=null;
$(this).addClass('disabled').val('还剩60秒');
timer=setInterval(function(){
if(i>0)
{i--;
$('.sentBtn').val('还剩'+i+'秒');
}
else
{
clearInterval(timer);
$('.sentBtn').removeClass('disabled').val('获取验证码');
}
},1000);
})
});
</script>
</head>
<body>
<input type="button" value="获取验证码" class="sentBtn">
</body>
</html>
css代码:
@charset "utf-8";
/* CSS Document */
.sentBtn.disabled {
background-color:#CCC !important;
cursor:not-allowed !important;
}
/* 发送按钮样式 */
.sentBtn {
min-width:100px;
padding:5px;
border:none;
color:#FFF;
background-color:#83EBF0;
border-radius:4px;
cursor:pointer;
}
效果:
![](https://img-blog.csdnimg.cn/20200424200304200.png)