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

2019-11-19 17:19:54

字体：大中小

来源：转载

供稿：网友

效果图：

图（1）初始图

图（2）点击后

代码如下：

<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>pro.html</title><style type="text/css">.checkCode {  cursor: pointer;  border: 1px solid black;  text-align: center;  line-height: 26px;  width: 115px;  height: 35px;}</style><script type="text/javascript">  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);      }    }  }</script></head><body>  <input class="checkCode" type="button" id="btn" value="免费获取验证码" /></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：js实现二级导航功能

下一篇：jQuery获取Table某列的值（推荐）