jQuery实现简单的计时器功能实例分析


Posted in jQuery onAugust 29, 2017

本文实例讲述了jQuery实现简单的计时器功能。分享给大家供大家参考,具体如下:

在写项目的过程中遇到要前端60秒发送验证码的业务需求,于是用到计时器的功能:

setInterval(function xxx(){
   //业务逻辑
},隔多少时间执行一次)

60秒计时思路:

1、设置秒数:60s
2、设置内容:实时改变,秒数+内容
3、结束后:去掉按钮的disable,内容恢复原来样子

//计时器60秒
function timeInterval(){
  $("#code_send_btn").html("60秒后重新获取邮箱验证码");
  var timeSec = 59;
  var timeStr = '';
  var codeTime = setInterval(function Internal(){
    if (timeSec == 0){
      $("#code_send_btn").html("获取邮箱注册码");
      $("#code_send_btn").removeAttr("disabled","disabled");
      clearInterval(codeTime);
      return;
    }
    timeStr = "("+timeSec+")获取邮箱注册码";
    $("#code_send_btn").html(timeStr);
    timeSec--;
  },1000);
}
jQuery 相关文章推荐
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 #jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
You might like
php中目录,文件操作详谈
2007/03/19 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php广告加载类用法实例
2014/09/23 PHP
smarty中post用法实例
2014/11/28 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python如何删除文件、目录
2020/06/23 Python
学python需要去培训机构吗
2020/07/01 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
说出数据连接池的工作机制是什么?
2013/04/19 面试题
2014年征兵标语
2014/06/20 职场文书
文秘应届生求职信
2014/07/05 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
红色故事汇观后感
2015/06/18 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
python_tkinter事件类型详情
2022/03/20 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript