随着移动端的开发,注册页面大部分都会有手机号注册或者登录,所以手机获取验证码就是非常有必要的一个步骤:
html代码如下:
1 <div class="yzm"> 2 <input type="button" class="primary" value="获取验证码" onclick="clickButton(this)"/> 3 </div>
css代码如下:
1 yzm{ 2 width: 55%; 3 margin:0 auto; 4 margin-top: 10%; 5 } 6 .primary{ 7 color: #fff; 8 margin-top: -14%; 9 width: 100px; 10 height: 28px; 11 border-radius: 15px; 12 border: none; 13 }
js代码如下:
1 function clickButton(obj){ 2 var obj = $(obj); 3 obj.attr("disabled","disabled"); /*按钮倒计时*/ 4 var time = 60; 5 var set=setInterval(function(){ 6 obj.val(--time+"(s)"); 7 }, 1000); /*等待时间*/ 8 setTimeout(function(){ 9 obj.attr("disabled",false).val("重新获取"); /*倒计时*/ 10 clearInterval(set); 11 }, 60000); 12 }