可以倒计时的验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no" />
<meta name="divat-detection" content="telephone=no" />
<title>bootstrapTest</title>
<!-- 公共 -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/bootstrap.css" >
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/viewport.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<style>
/* a.disabled {
pointer-events: none;
filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity: 0.5; /*Firefox私有，透明度50%*/
opacity: 0.5; /*其他，透明度50%*/
}*/
</style>
<script>
$(function(){
clicka();
});
function clicka(){
$('.disabled').click(function(){
var time=10;
var a = setInterval(function(){
console.log(time--);
$("#ab").html("<strong>"+time+"</strong> 秒后可重新发送！");
if(time<=0){
$("#ab").html("点击获取验证码");
$("#ab").css("pointer-events","").css("opacity","").css("text-decoration","").css("filter","");
clearInterval(a);
}
},1000);
// $("#ab").html(time+"秒后可重新发送！");
$("#ab").css("pointer-events","none").css("opacity","0.5").css("text-decoration","none").css("filter","alpha(opacity=50)");
});
}
</script>
</head>
<body>
<div>
<a class="disabled" href="#" id="ab" disabled>点击获取验证码</a>
</div>
</body>
</html>
上边自己写的,,下边网上看到的 收藏一下
$(function(){
$('#b1').click(function(){
var b1 = "b1";
clickBtn(b1);
});
});
var time = 5;
function clickBtn(btnId){
var content = $('#'+btnId).html();
countNum(btnId);
console.log(content);
}
function countNum(btnId){
console.log(time);
if(time==0){
$('#'+btnId).html("发送验证码");
$('#'+btnId).removeAttr("disabled");
time=5;
return;
} else {
$('#'+btnId).html(time+" 秒后重新发送");
$('#'+btnId).attr("disabled","true");
time--;
}
//定时器
var a = setTimeout(function(){
countNum(btnId);
},1000);
}
</script>
</head>
<body>
<button type="button" id="b1">发送验证码</button>
</body>
