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+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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文件中bom的PHP代码
2012/03/13 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
jquery选择器使用详解
2014/04/08 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
python实现的防DDoS脚本
2011/02/08 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Europcar比利时:租车
2019/08/26 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年防汛工作总结
2014/12/08 职场文书
员工升职自荐信
2015/03/27 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
实操Python爬取觅知网素材图片示例
2021/11/27 Python
Tomcat弱口令复现及利用
2022/05/06 Servers