jQuery 实现发送验证码的倒计时

很多网站在注册界面经常要获取验证码需求。获取验证码都会出现一个验证码倒计时,一般都是60秒倒计时,要是等待过了这个60秒的倒计时,又可以重新发送验证码。今天就来说说用jQuery如何才能实现倒计时!有需求的伙伴们可以看看!

首先我们来看看效果图:

点击获取验证码后出现60秒的重发倒计时

当倒计时结束后,出现重发的按钮,以此循环

实现的代码:

HTML(由于是项目中的页面,所以只能截取重要的部分代码,谅解):

jQuery实现发送验证码的倒计时代码

CSS 样式你们自己美化就 OK,这里就不一一展示;

JS代码:

countdown设置倒计时的秒数从多少开始,然后依次递减,当倒计时为0时候,按钮中的文字就变为“重发”然后重置倒计时秒数为初始的60秒!倒计时不为0的时候就依次递减,定义了一个定时器在循环!

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

江伟松的专栏

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android点滴积累

adb shell 查看系统属性(用来判断特殊的操作系统)

一般来讲,在android程序开发中进行需要判断设备类型和系统版本 1、设备类型判断(android.os.Build.MODEL) 比如判断属于Google ...

18910
来自专栏蜉蝣禅修之道

Jquery使用jsonp跨域访问

1324
来自专栏weixuqin 的专栏

servlet 核心技术

在 servlet 生命周期中,servlet 容器完成加载 servlet 类和实例化一个 servlet 实例,并通过3个方法来完成生命周期中的其他阶段。

671
来自专栏用户画像

Ajax post 请求后端,server返回Map结果集

512
来自专栏蘑菇先生的技术笔记

64位进程池HashCode兼容处理

2226
来自专栏小灰灰

Java 动手写爬虫: 一、实现一个最简单爬虫

第一篇 准备写个爬虫, 可以怎么搞? 使用场景 先定义一个最简单的使用场景,给你一个url,把这个url中指定的内容爬下来,然后停止 一个待爬去的网址(有个地...

4236
来自专栏青枫的专栏

Servlet学习补充

873
来自专栏好好学java的技术栈

servlet就是这么简单

Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库...

582
来自专栏Spring相关

关于spring中的validate注解后台校验的解析

在后台开发过程中,对参数的校验成为开发环境不可缺少的一个环节。比如参数不能为null,email那么必须符合email的格式,如果手动进行if判断或者写正则表达...

771
来自专栏玩转JavaEE

Shiro中的授权问题(二)

上篇博客(Shiro中的授权问题 )我们介绍了Shiro中最最基本的授权问题,以及常见的权限字符的匹配问题。但是这里边还有许多细节需要我们继续介绍,本节我们就来...

3135

扫码关注云+社区