AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js,获取验证码按钮,验证码倒计时效果

效果图:

图(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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持wanshiok.com!


js,获取验证码按钮,验证码倒计时效果  
上一篇:js实现二级导航功能  下一篇:jQuery获取Table某列的值(推荐)