JS+HTML5实现获取手机验证码倒计时按钮


            效果图如下所示：



HTML：





 <input type="button" value="获取验证码"> 



CSS：





 input[type=button]

  width: 150px;

  height: 30px;

  background-color: #ff3000;

  border: 0;

  border-radius: 15px;

  color: #fff;

 }

 input[type=button].on {

  background-color: #eee;

  color: #ccc;

  cursor: not-allowed;

 }





JavaScript：





 $("input[type='button']").click(btnCheck);

  /**

  * [btnCheck 按钮倒计时常用于获取手机短信验证码]

  */

  function btnCheck() {

   $(this).addClass("on");

   var time = 5;

   $(this).attr("disabled", true);

   var timer = setInterval(function() {

    if (time == 0) {

     clearInterval(timer);

     $("input").attr("disabled", false);

     $("input").val("获取验证码");

     $("input").removeClass("on");

    } else {

     $('input').val(time + "秒");

     time--;

    }

   }, 1000);

  }



GitHub：Fuck me on GitHub Fuck me on GitHub

总结

以上所述是小编给大家介绍的JS+HTML5实现获取手机验证码倒计时按钮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！