jQuery实现发送验证码并60秒倒计时功能


Posted in Javascript onNovember 25, 2016

本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能。废话不多说了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
var countdown=60; 
function settime(obj) { 
if (countdown == 0) { 
obj.removeAttribute("disabled"); 
obj.value="免费获取验证码"; 
countdown = 60; 
return;
} else { 
obj.setAttribute("disabled", true); 
obj.value="重新发送(" + countdown + ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(obj) }
,1000) 
}
</script>
<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
</body>
</html>

以上所述是小编给大家介绍的jQuery实现发送验证码并60秒倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 #Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
JS实现图片切换特效
2019/12/23 Javascript
python复制与引用用法分析
2015/04/08 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
python中pyplot基础图标函数整理
2020/11/10 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
大学生简短的自我评价分享
2014/02/20 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
小学运动会加油稿
2015/07/22 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
MySQL多表查询机制
2022/03/17 MySQL