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 12 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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
一个分页的论坛
2006/10/09 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python中按键来获取指定的值
2019/03/02 Python
Python变量访问权限控制详解
2019/06/29 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python的几种主动结束程序方式
2019/11/22 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
单位在职证明范本
2014/01/09 职场文书
库房管理员岗位职责
2014/03/09 职场文书
活动总结格式范文
2014/04/26 职场文书
社区春季防火方案
2014/06/02 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
学籍证明模板
2014/11/21 职场文书
员工离职证明范本
2015/06/12 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
党员公开承诺书2016
2016/03/24 职场文书
日元符号 ¥
2022/02/17 杂记
Go语言grpc和protobuf
2022/04/13 Golang