快捷導(dǎo)航

jQuery實(shí)現(xiàn)簡(jiǎn)單的計(jì)時(shí)器功能實(shí)例分析

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

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

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

在寫(xiě)項(xiàng)目的過(guò)程中遇到要前端60秒發(fā)送驗(yàn)證碼的業(yè)務(wù)需求，于是用到計(jì)時(shí)器的功能：

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

60秒計(jì)時(shí)思路：

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

//計(jì)時(shí)器60秒
function timeInterval(){
  $("#code_send_btn").html("60秒后重新獲取郵箱驗(yàn)證碼");
  var timeSec = 59;
  var timeStr = '';
  var codeTime = setInterval(function Internal(){
    if (timeSec == 0){
      $("#code_send_btn").html("獲取郵箱注冊(cè)碼");
      $("#code_send_btn").removeAttr("disabled","disabled");
      clearInterval(codeTime);
      return;
    }
    timeStr = "("+timeSec+")獲取郵箱注冊(cè)碼";
    $("#code_send_btn").html(timeStr);
    timeSec--;
  },1000);
}

PS:這里再為大家推薦幾款相關(guān)的在線工具供大家參考：

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

最新的10款jQuery內(nèi)容滑塊插件分享
本篇文章介紹10款新鮮、有用的jQuery內(nèi)容導(dǎo)航插件，肯定是免費(fèi)的了，希望對(duì)你有幫助。
2011-09-09
Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹(shù)
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹(shù)，本文通過(guò)代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹(shù)的過(guò)程，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
jquery獲取select選中值的文本,并賦值給另一個(gè)輸入框的方法
今天小編就為大家分享一篇jquery獲取select選中值的文本,并賦值給另一個(gè)輸入框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
jquery中判斷圖片是否存在的實(shí)現(xiàn)代碼
有時(shí)候我們需要判斷當(dāng)前的圖片是否存在，方便后期做一些操作，當(dāng)然也可以參考上一篇文章，如果不存在就替換位默認(rèn)圖片
2023-06-06
基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁(yè)布局的時(shí)候，我們經(jīng)常會(huì)面臨一個(gè)問(wèn)題，就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中，雖然好幾種方式實(shí)現(xiàn)，但是今天介紹時(shí)我最喜歡的方法，通過(guò)css和jQuery實(shí)現(xiàn)。
2011-08-08
jQuery實(shí)現(xiàn)強(qiáng)制cookie過(guò)期方法匯總
本文是對(duì)jquery 強(qiáng)制cookie失效的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
2015-05-05
瀏覽器常用高寬的jquery插件
兼容BackCompat,CSS1Compat兩模式渲染的頁(yè)面,測(cè)試的瀏覽器 :friefox ie678 chrome opera
2011-02-02
jQuery 開(kāi)天辟地入門(mén)篇一
這篇jquery入門(mén)的文章，確實(shí)不錯(cuò)，前提是大家已經(jīng)對(duì)js稍微熟悉一點(diǎn)即可能看懂，非常不錯(cuò)的jquery入門(mén)篇文章。
2009-12-12
JQuery toggle使用分析
今天針對(duì)這個(gè)JQuery里面的toggle聊幾句，文章中涉及到了一些問(wèn)題望牛牛們能幫忙解惑一下。
2009-11-11
基于jQuery解決ios10以上版本縮放問(wèn)題
本文通過(guò)一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問(wèn)題，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-11-11