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实现文字打印动态效果
Apr 21 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery实现吸顶导航效果
Jan 08 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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Python网站验证码识别
2016/01/25 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
django 自定义过滤器的实现
2019/02/26 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
总经理司机职责
2014/02/02 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
英语国培研修感言
2014/02/13 职场文书
公司节能减排方案
2014/05/16 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
图书馆义工感想
2015/08/07 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
新手初学Java网络编程
2021/07/07 Java/Android
Redis分布式锁Redlock的实现
2021/08/07 Redis