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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery插件懒加载的示例
Oct 24 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的access操作类
2008/04/09 PHP
php+mysql事务rollback&commit示例
2010/02/08 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
require.js的用法详解
2015/10/20 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python实现快速计算词频功能示例
2018/06/25 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python3实现多线程聊天室
2018/12/12 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
小学校园活动策划
2014/01/30 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
大学生个人求职信
2014/06/02 职场文书
求职简历自我评价2015
2015/03/10 职场文书
自我推荐信格式模板
2015/03/24 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python