码迷,mamicode.com
首页 > Web开发 > 详细

JS实现验证码倒计时效果

时间:2017-11-22 20:17:29      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:样式   输入验证码   遇到   fun   效果   log   分享   flow   gif   

通常做注册页面时会有获取验证码按钮,然后点击后过60秒才能重新获取,比如现在项目中遇到的

技术分享图片

然后点击后的样式,并且数字是递减的,到0时重新回到最初的状态(上图)。

技术分享图片

首先构造HTML结构

<button class="getCode">获取验证码</button>

 

css就略了

JS实现:

技术分享图片
var wait=60;
        function time(o){
            if (wait==0) {
                o.removeAttribute("disabled");    
                o.innerHTML="输入验证码";
                o.style.backgroundColor="#fe9900";
                wait=60;
            }else{
                o.setAttribute("disabled", true);
                o.innerHTML=wait+"秒后重新获取";
                o.style.backgroundColor="#8f8b8b";
                wait--;
                setTimeout(function(){
                    time(o)
                },1000)
            }
        }
技术分享图片

最后点击按钮,调用time方法:

$(".getCode").click(function(){
            time(this);
        });

 

至此全部功能全部完毕。

JS实现验证码倒计时效果

标签:样式   输入验证码   遇到   fun   效果   log   分享   flow   gif   

原文地址:http://www.cnblogs.com/yangjing1314/p/7880333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!