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实现二级联动效果
Mar 30 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python代码太长换行的实现
2019/07/05 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
十佳护士获奖感言
2014/02/18 职场文书
保健品市场营销方案
2014/03/31 职场文书
需求分析说明书
2014/05/09 职场文书
解除财产保全担保书
2014/05/20 职场文书
法院授权委托书范文
2014/08/02 职场文书
付款委托书范本
2014/10/05 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
商业计划书格式、范文
2019/03/21 职场文书