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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery实现轮播图特效
Apr 12 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP序列化操作方法分析
2016/09/28 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Django 开发环境配置过程详解
2019/07/18 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python实现最速下降法
2020/03/24 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python 里最强的地图绘制神器
2021/03/01 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
2014年班务工作总结
2014/12/02 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Python实现生成bmp图像的方法
2021/06/13 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL