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è)計有所幫助。
您可能感興趣的文章:
- 使用jquery讀取html5 localstorage的值的方法
- jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage的基本用法
- jQuery timers計時器簡單應(yīng)用說明
- 基于JQuery.timer插件實現(xiàn)一個計時器
- jquery 顯示*天*時*分*秒實現(xiàn)時間計時器
- 基于jquery插件編寫countdown計時器
- sliderToggle在寫jquery的計時器setTimeouter中不生效
- jQuery實現(xiàn)倒計時功能 jQuery實現(xiàn)計時器功能
- jquery實現(xiàn)一個全局計時器(商城可用)
- 利用jQuery+localStorage實現(xiàn)一個簡易的計時器示例代碼
相關(guān)文章
本篇文章介紹10款新鮮、有用的jQuery內(nèi)容導(dǎo)航插件，肯定是免費的了，希望對你有幫助。2011-09-09
Jquery easyui 實現(xiàn)動態(tài)樹
本文給大家介紹jquery easyui實現(xiàn)動態(tài)樹，本文通過代碼實例相結(jié)合的方式給大家展示jquery easyui實現(xiàn)動態(tài)樹的過程，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery獲取select選中值的文本,并賦值給另一個輸入框的方法
今天小編就為大家分享一篇jquery獲取select選中值的文本,并賦值給另一個輸入框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
有時候我們需要判斷當(dāng)前的圖片是否存在，方便后期做一些操作，當(dāng)然也可以參考上一篇文章，如果不存在就替換位默認圖片2023-06-06
基于jQuery實現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時候，我們經(jīng)常會面臨一個問題，就是讓一個div實現(xiàn)水平和垂直居中，雖然好幾種方式實現(xiàn)，但是今天介紹時我最喜歡的方法，通過css和jQuery實現(xiàn)。2011-08-08
本文是對jquery 強制cookie失效的解決方法進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2015-05-05
兼容BackCompat,CSS1Compat兩模式渲染的頁面,測試的瀏覽器 :friefox ie678 chrome opera2011-02-02
這篇jquery入門的文章，確實不錯，前提是大家已經(jīng)對js稍微熟悉一點即可能看懂，非常不錯的jquery入門篇文章。2009-12-12
今天針對這個JQuery里面的toggle聊幾句，文章中涉及到了一些問題望牛牛們能幫忙解惑一下。2009-11-11
本文通過一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-11-11