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

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

首先我们来看看效果图:

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

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

实现的代码:

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

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

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

JS代码:

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

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

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

编辑于

江伟松的专栏

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

SVG fallback 及可读性

1223
来自专栏QQ音乐前端团队专栏

制作60fps的高性能动画

说到web的高性能动画,这部分内容其实已经是老生常谈的了,不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。

6484
来自专栏程序你好

在网站或桌面应用使用Font Awesome图标库

1752
来自专栏hrscy

iOS百度地图开发中遇到的问题

由于项目需要地图功能,公司决定使用百度地图,但是百度地图也有很多问题,现在总结一下在百度地图中遇到的坑,希望给各位看官一点参考,避免走一些弯路.我使用的百度地图...

602
来自专栏Coco的专栏

神秘的 shadow-dom 浅析

2114
来自专栏糊一笑

移动端Webapp中的那些Bug

持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0(IOS 10.3.3) Github: webapp-bugs 1....

7824
来自专栏web前端

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、chec...

17410
来自专栏吴老师移动开发

【iOS开发】UITableView优化

移动开发中,任何一个应用都或多或少的有列表的存在,列表的上下滑动直接关系到用户体验。如果处理不好,就会使得列表滑动起来有明显的卡顿效果。所以对列表的优化,让它更...

981
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

3705
来自专栏菜鸟前端工程师

react-开发经验分享-modal框内嵌form表单数据提交到父级页面问题

1642

扫码关注云+社区