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实现定时刷新功能代码
May 09 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
印尼网上商店:Alfacart.com
2019/03/11 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
顶岗实习接收函
2014/01/09 职场文书
酒店端午节活动方案
2014/08/26 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书