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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery timers计时器简单应用说明

    因为方便嘛,Jquery已封装JS的setTimeout 和 setInterval 方法,下面看下应用例子: 复制代码 代码如下: /** * jQuery.timers - Timer abstractions for jQuery * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com) * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/). * D

  • jquery简单倒计时实现方法

    本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2

  • 基于jquery插件编写countdown计时器

    基于jquery插件编写countdown计时器

    废话不多说,直接上代码: 先展示一下插件调用方式:  1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插

  • 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器

    先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码 代码如下: <script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script> 然后是HTML,我们可以放一个hidden 的server control存值用,当然这个随你了. 复制代码 代码如下: <asp:Hid

  • JQuery实现倒计时按钮具体方法

    复制代码 代码如下: <head>    <title>test count down button</title>    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>    <script type="text/javascri

  • 利用jQuery实现漂亮的圆形进度条倒计时插件

    利用jQuery实现漂亮的圆形进度条倒计时插件

    jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览    源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"><

  • sliderToggle在写jquery的计时器setTimeouter中不生效

    今天在写jquery时发现sliderToggle在setTimeouter中不生效,还报错说是发生了意想不到的错误.看了很久也没明白后来猛然发现使用show();hide():就可以. bootstrap的一些学习笔记. 首先应该了解其框架构成,什么对应什么,其次是名称要熟练记忆,一般而言都是所见即所得,名字很有规律.最后是多练,在练习中逐渐掌握这些规则.

  • jquery实现一个全局计时器(商城可用)

    本文实例为大家分享了商城一类都可以使用的jquery全局计时器,供大家参考,具体内容如下 实现思路 遍历所有待计时元素,添加一个setInterval计时函数,每隔X秒执行更新计时操作(中间可能还有格式化时间操作). 代码实现 ps:JQ元素通过arr[i]取值时会转变成DOM元素,dom元素和JQ之间转换用 $(arr[i]) 获取所有待计时元素 var arrList =$(".stime"); setInterval(function(){ //遍历数组 for(var i =

  • jquery 显示*天*时*分*秒实现时间计时器

    1.用jquery实现时间计时器,从之前的某个时间段到现在距离多少天多少时多少分多少秒? html代码: 复制代码 代码如下: <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w"> <span id="time_d" class="time"> </span >天 <spa

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • jQuery实现倒计时跳转的例子

    实现代码: 复制代码 代码如下: <html>   <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    <title>跳转页面</title>      <script src="jquery.js"></script>    <script la

  • jquery实现手机发送验证码的倒计时代码

    复制代码 代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.

随机推荐