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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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 变量定义和变量替换的方法
2009/07/30 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php 函数中使用static的说明
2012/06/01 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
基于vue、react实现倒计时效果
2019/08/26 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python实现多人聊天室
2020/03/31 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python操作excel让工作自动化
2019/08/09 Python
python实现简单银行管理系统
2019/10/25 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
俞敏洪一分钟演讲稿
2014/08/26 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis