js实现短信验证码倒计时功能

第一种是原生js的写法:

<div class="div user-input">  
  <input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6">  
  <input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(this);">  
</div>  
<script type="text/javascript">    
//倒计时  
var countdown=60;  
function settime(obj) {  
    if (countdown == 0) {  
        obj.removeAttribute("disabled");  
        obj.value="获取验证码";  
        countdown = 60;  
        return false;  
    } else {  
        obj.setAttribute("disabled", true);  
        obj.value="重新发送(" + countdown + ")";  
        countdown--;  
    }  
    setTimeout(function() {  
        settime(obj);  
    },1000);  
}  
</script>

第二种是jquery的写法:

<div class="div user-input">  
  <input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6">  
  <input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(this);">  
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">  
//倒计时  
var countdown=60;  
function settime(obj) {  
    if (countdown == 0) {  
        $(obj).removeAttr("disabled");  
        $(obj).val('重新获取');  
        countdown = 60;  
        return false;  
    } else {  
        $(obj).attr("disabled", true);  
        $(obj).val(countdown+"s重新获取");  
        countdown--;  
    }
    setTimeout(function() {  
        settime(obj);  
    },1000);  
}
</script>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: