快捷導(dǎo)航

jQuery實現(xiàn)簡單的計時器功能實例分析

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

這篇文章主要介紹了jQuery實現(xiàn)簡單的計時器功能,結(jié)合實例形式分析了jQuery實現(xiàn)倒計時60秒的具體操作技巧與相關(guān)注意事項,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)簡單的計時器功能。分享給大家供大家參考，具體如下：

在寫項目的過程中遇到要前端60秒發(fā)送驗證碼的業(yè)務(wù)需求，于是用到計時器的功能：

setInterval(function xxx(){
   //業(yè)務(wù)邏輯
},隔多少時間執(zhí)行一次)

60秒計時思路：

1、設(shè)置秒數(shù)：60s
2、設(shè)置內(nèi)容：實時改變，秒數(shù)+內(nèi)容
3、結(jié)束后：去掉按鈕的disable，內(nèi)容恢復(fù)原來樣子

//計時器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:這里再為大家推薦幾款相關(guān)的在線工具供大家參考：

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

Unix時間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/code/unixtime

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

不用錨點也可以平滑滾動到頁面的指定位置實現(xiàn)代碼
在不適用錨點的情況下也可以平滑滾動到頁面的指定位置，看樣子還不錯嗎，具體處理程序如下，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-05-05
jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載（二）
這篇文章主要介紹了jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載（二）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
jQuery的ready方法詳解
本文主要介紹了jQuery的ready方法的使用方法，用此方法實現(xiàn)了當(dāng)爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。
2014-11-11
jQuery圖片縮放插件smartZoom使用實例詳解
本文通過實例代碼給大家簡單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問題的解決方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-08-08
jQuery分組選擇器用法實例
這篇文章主要介紹了jQuery分組選擇器用法,以實例形式分析了分組選擇器的功能與具體用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
SinaEditor使用方法詳解
本篇文章主要是對SinaEditor使用方法進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jquery tmpl模板(實例講解)
下面小編就為大家?guī)硪黄猨query tmpl模板(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery實現(xiàn)鼠標(biāo)滑過遮罩并高亮顯示效果
本文為大家詳細(xì)介紹下使用jQuery實現(xiàn)鼠標(biāo)滑過遮罩高亮顯示效果，想必這種效果在網(wǎng)上大家都有見到過，下面是具體的示例，感興趣的各位可以參考下哈，希望對大家有所幫助
2013-07-07
jquery 獲取當(dāng)前元素的索引值
jQuery獲取當(dāng)前元素的索引值還是很方便的，比如一大堆的li，當(dāng)鼠標(biāo)移上去的時候，你知道這個li是眾多l(xiāng)i中的第幾個嗎？
2009-05-05
jQuery中even選擇器的定義和用法
這篇文章主要介紹了jQuery中even選擇器的定義和用法,較為詳細(xì)的分析了event選擇器的語法結(jié)構(gòu)與具體用法,并以一個設(shè)置偶數(shù)行為藍色字體的例子總結(jié)了其用法與功能特點,需要的朋友可以參考下
2014-12-12