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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery实现简单每周轮换的日历
Sep 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
php 无法载入mysql扩展
2010/03/12 PHP
PHP中使用curl入门教程
2015/07/02 PHP
php实现zip文件解压操作
2015/11/03 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
大学生先进事迹材料
2014/02/16 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
开除通知书范本
2015/04/25 职场文书
离婚案件被告代理词
2015/05/23 职场文书
机器人总动员观后感
2015/06/09 职场文书
初中体育教学随笔
2015/08/15 职场文书