js如何实现简单的获取验证码按钮效果

小编给大家分享一下js如何实现简单的获取验证码按钮效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联是一家专注于网站设计制作、网站建设与策划设计,张家港网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:张家港等地区。张家港做网站价格咨询:028-86922220

效果图：

图（1）初始图

图（2）点击后

代码如下：

.checkCode {
  cursor: pointer;
  border: 1px solid black;
  text-align: center;
  line-height: 26px;
  width: 115px;
  height: 35px;
}


  var sleep = 30, interval = null;
  window.onload = function ()
  {
    var btn = document.getElementById ('btn');
    btn.onclick = function ()
    {
      if (!interval)
      {
        this.style.backgroundColor = 'rgb(243, 182, 182)';
        this.disabled = "disabled";
        this.style.cursor = "wait";
        this.value = "重新发送 (" + sleep-- + ")";
        interval = setInterval (function ()
        {
          if (sleep == 0)
          {
            if (!!interval)
            {
              clearInterval (interval);
              interval = null;
              sleep = 30;
              btn.style.cursor = "pointer";
              btn.removeAttribute ('disabled');
              btn.value = "免费获取验证码";
              btn.style.backgroundColor = '';
            }
            return false;
          }
          btn.value = "重新发送 (" + sleep-- + ")";
        }, 1000);
      }
    }
  }



  

看完了这篇文章，相信你对“js如何实现简单的获取验证码按钮效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！