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

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

首先我们来看看效果图:

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

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

实现的代码:

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

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

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

JS代码:

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

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

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

编辑于

江伟松的专栏

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

1062
来自专栏非著名程序员

Android 实现视屏播放器、边播边缓存功能、外加铲屎(IJKPlayer)

Android 实现视屏播放器与边播边缓存功能外加蹲坑铲屎(IJKPlayer) hello,大家好,我就是那个会掀桌子的话唠,刚刚结束两篇关于音频播放与录制的...

5529
来自专栏Android知识点总结

6-VI--ListView琐碎小知识点汇总

724
来自专栏IMWeb前端团队

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 最近在做组件的过程中遇到滚动到底部需要加载更多的需求,发现每个HTML元...

2435
来自专栏企鹅号快讯

用JavaScript 代码来做,图片切换效果!

用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段...

1807
来自专栏xingoo, 一个梦想做发明家的程序员

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态。因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿。传统的数据展现都以分页的形...

20610
来自专栏小李刀刀的专栏

动态实现指定图片半透明及鼠标事件

说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现: 1.假设我们要...

2689
来自专栏向治洪

RecyclerView notifyItem闪烁的问题

之前我们做点赞,用listview做的话,就是在item实现点击后,写一个scal动画,不过现在都转到RecyclerView,那么要做这种效果于是做了一个no...

2455
来自专栏项勇

笔记54 | 管理系统UI(二)

1464
来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

3567

扫码关注云+社区