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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现全选按钮
Jan 01 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
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
chrome原生方法之数组
2011/11/30 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python访问sqlserver示例
2014/02/10 Python
Python图算法实例分析
2016/08/13 Python
python实现外卖信息管理系统
2018/01/11 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
业务员简历自我评价
2014/03/06 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL