jQuery实现简单的计时器功能实例分析

更新时间：2017年08月29日 11:31:45 作者：lemontree1993

这篇文章主要介绍了jQuery实现简单的计时器功能,结合实例形式分析了jQuery实现倒计时60秒的具体操作技巧与相关注意事项,需要的朋友可以参考下

本文实例讲述了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);
}

PS:这里再为大家推荐几款相关的在线工具供大家参考：

在线秒表工具：
http://tools.jb51.net/bianmin/miaobiao

Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery 实时保存页面动态添加的数据的示例
本篇文章主要介绍了jQuery 实时保存页面动态添加的数据的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
以WordPress为例讲解jQuery美化页面Title的方法
鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下
2016-05-05
jQuery.event兼容各浏览器的event详细解析
jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断
2013-12-12
基于Jquery+Ajax+Json的高效分页实现代码
分页我相信大家存储过程分页已经很熟悉了，ajax更是耳熟能详了，更别说我们的json，等等
2011-10-10
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，在现在的Web开发项目中扮演着重要角色。这篇文章与大家分享33个优秀的 jQuery 教程，教您如何使用 jQuery 制作幻灯片、动画菜单、照片墙、图片画廊等很多效果很炫的功能。
2011-07-07
jQuery实现简洁的轮播图效果实例
这篇文章主要介绍了jQuery实现简洁的轮播图效果,结合实例形式分析了jQuery的事件响应机制与页面元素动态操作相关技巧,需要的朋友可以参考下
2016-09-09
jQuery EasyUI常用数据验证汇总
这篇文章主要为大家详细汇总了jQuery EasyUI常用数据验证,介绍了validatebox()提供的自定义验证，感兴趣的小伙伴们可以参考一下
2016-09-09
Jquery Easyui菜单组件Menu使用详解（15）
这篇文章主要为大家详细介绍了Jquery Easyui菜单组件Menu的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
jQuery中:text选择器用法实例
这篇文章主要介绍了jQuery中:text选择器用法,以实例形式较为详细的分析了text选择器的功能、定义及匹配单行文本框的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery基础知识小结
本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结，非常的详尽，推荐给有需要的小伙伴。
2014-12-12