通常做注册页面时会有获取验证码按钮,然后点击后过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实现验证码倒计时效果的更多相关文章

  1. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  2. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  3. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

  4. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  5. js实现发送验证码倒计时效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js 验证码倒计时效果

    function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...

  7. js实现60s倒计时效果

    适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button' ...

  8. jquery实现获取手机验证码倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

随机推荐

  1. python fabric install

    1,install setuptools 2,install pip 3,install pycrpto 4,install paramiko 5,install fabric

  2. css知多少——选择器的优先级

    1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  3. 与资源库同步时,我的svn报错 Previous operation has not finished; run 'cleanup' if it was interrupted

    解决办法:选择你的项目,右键,小组(Team),刷新或清理(Refresh or Clean)即可.

  4. github创建文件夹

      网页上只能通过在创建新文件的时候顺便创建文件夹(文件夹与文件用 / 隔开),例如home/test.md就在该仓库下创建了一个文件夹home,该文件夹下有一个新的文件test.md

  5. 基于MDK的mbed工程建立

    个人更喜欢mdk作为IDE来编写代码,而mbed作为一个开源项目,有大量优秀代码可以借鉴使用,今后一段时间都会主要看mbed平台的代码以及国内ebox平台代码         1  首先登陆mbed在 ...

  6. EditPlus 3.7 中文版已经发布

    新一版的 EditPlus 已经在昨天发布了!新版本增加了一个 64位版程序.大家可以到官方网站下载哦. 我同步更新翻译了 32位版应用程序.请点击页面左上角的链接下载.

  7. MongoDB - 在Windows上安装

    1 下载MongoDB社区版, 下载链接 http://www.mongodb.org/downloads?_ga=1.129742796.1997610832.1481940266 2 安装Mong ...

  8. oracle性能优化之表设计

    数据库优化的目标无非是避免磁盘I/O瓶颈.减少CPU利用率和减少资源竞争.为了便于读者阅读和理解,笔者参阅了Sybase.Informix和Oracle等大型数据库系统参考资料,基于多年的工程实践经验 ...

  9. Windows Azure Storage 之 Retry Policy (用来处理短暂性错误-Transient Fault)

    在使用Windows Azure Storage Service 的时候, 通常会遇到各种各样的问题. 例如网络连接不稳定,导致请求没有发出去.删除一个Blob Container 之后又立刻创建同名 ...

  10. c#控制台調用SSIS包互传值

    有时候不仅仅需要在内部执行package包,多数情况下,是需要在外部进行调用,比如,需要一个批处理或者控制台程序进行外部调用SSIS包,而往往这个包所配置的连接字符串是经过加密处理的,所以当外部调用S ...