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平滑滚动到顶部插件使用详解
May 08 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 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
自定义session存储机制避免会话保持问题
2014/10/08 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
javascript表单验证大全
2015/08/12 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
自我鉴定的范文
2013/10/03 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2015年护士节慰问信
2015/03/23 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫