首頁 > web前端 > js教程 > jQuery實作計時器功能詳解

jQuery實作計時器功能詳解

php中世界最好的语言
發布: 2018-04-18 15:30:30
原創
2720 人瀏覽過

這次帶給大家jQuery實作計時器功能詳解,jQuery實作計時器功能的注意事項有哪些,下面就是實戰案例,一起來看一下。

在寫專案的過程中遇到要前端60秒發送驗證碼的業務需求,於是用到計時器的功能:

setInterval(functionxxx(){
   //业务逻辑
},隔多少时间执行一次)
登入後複製

60秒計時思路:

1.設定秒數:60s
2、設定內容:即時改變,秒數內容
3、結束後:去掉按鈕的disable,內容恢復原本

//计时器60秒
functiontimeInterval(){
  $("#code_send_btn").html("60秒后重新获取邮箱验证码");
  vartimeSec = 59;
  vartimeStr ='';
  varcodeTime = setInterval(functionInternal(){
    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);
}
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

canvas怎麼編輯操作圖像

#js如何設定禁止表單重複提交

以上是jQuery實作計時器功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板