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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery实现聊天机器人
Feb 08 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
Python生成随机密码的方法
2017/06/16 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
对标管理实施方案
2014/03/12 职场文书
党支部换届选举方案
2014/05/08 职场文书
户外活动总结
2015/02/04 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
我的中国梦主题班会
2015/08/14 职场文书
七年级上册生物的课件
2019/08/07 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫