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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery层叠选择器用法实例分析
Jun 28 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
构建简单的Webmail系统
2006/10/09 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php画图实例
2014/11/05 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
ECMAScript 基础知识
2007/06/29 Javascript
摘自启点的main.js
2008/04/20 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
美国家具网站:Cymax
2016/09/17 全球购物
int和Integer有什么区别
2013/05/25 面试题
机械设计毕业生自荐信
2014/02/02 职场文书
捐资助学感谢信
2015/01/21 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
工程催款通知书
2015/04/17 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers