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

效果图：

图(1)初始图

图(2)点击后

代码如下：

！DOCTYPE html html towneta charset=' UTF-8 '/title pro。html/title样式类型=' text/CSS ' .checkCode { cursor:指针；border: 1px纯黑；文本对齐：中心；线高： 26px宽度： 115像素；height: 35px}/style脚本类型=' text/JavaScript ' var sleep=30，interval=nullwindow。onload=function(){ var BTN=document。getelementbyid(' BTN ')；btn.onclick=function () { if(！间隔){这个。风格。背景颜色=' RGB(243，182，182)'；this.disabled=' disabledthis。风格。光标='等待'；this.value='重新发送(“睡眠-”)；interval=setInterval(function(){ if(sleep==0){ if(！间隔){ clearInterval(区间);间隔=空睡眠=30;btn.style.cursor="指针";BTN。移除属性(“已禁用”)；btn.value='免费获取验证码；BTN。风格。background COlOr=}返回false} btn.value='重新发送(“睡眠-”)；}, 1000);} } }/script/head body input class=' CheckCode ' type=' button ' id=' BTN ' value='免费获取验证码//正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！