获取短信验证码倒计时，非常简单
作者: web
发布时间: 2019-12-06
浏览: 1669 次
编辑
Html5注册页面获取验证码倒计时，以及其他的定时器案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<title>获取短信验证码倒计时</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.btn {
border: 0;
width:120px;
height:40px;
line-height: 40px;
float:left;
color: white;
background-color: #08c;
border-radius: 20px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<input type="button" class="btn" id="code" value="获取验证码" οnclick="codeButton()">
</body>
<script type="text/javascript">
function codeButton(){
var code = $("#code");
code.attr("disabled","disabled");
setTimeout(function(){
code.css("opacity","0.8");
},1000)
var time = 60;
var set=setInterval(function(){
code.val("("+--time+")秒后重新获取");
}, 1000);
setTimeout(function(){
code.attr("disabled",false).val("重新获取验证码");
clearInterval(set);
}, 60000);
}
</script>
</html>
你我学习网
