span标签获取验证码！！！（倒计时）
代码在下面！！！个人总结欢迎批判不足
新
年
快
乐
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
<title>验证码倒计时</title>
<style type="text/css">
.verification{
position:relative;
width:400px;
}
.verification span{
position: absolute;
right: 0;
top: 0;
line-height: 55px;
width: 130px;
text-align: center;
cursor: pointer;
z-index: 10;
background: #ddd;
border-radius:5px;
}
.verification span.disabled{
cursor: no-drop;
color: #999;
}
.verification input{
padding-right: 150px;
width:220px;
height: 53px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 15px;
padding: 0 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="verification">
<input type="text" name="" id="" value="" maxlength="6" placeholder="动态码"/>
<span onclick="settime($(this))">获取验证码</span>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var countdown=60;
function settime(obj) {
if(countdown == 0){
obj.attr("onclick","settime($(this))");
obj.text('重新发送');
obj.removeClass('disabled')
countdown=60;
return;
}else{
obj.removeAttr("onclick");
obj.text('已发送'+countdown);
obj.addClass('disabled')
countdown--
};
setTimeout(function(){
settime(obj)
},1000)
}
</script>
</body>
</html>获取验证码前的样式
获取验证码后的样式