js實現(xiàn)5秒倒計時重新發(fā)送短信功能
本文實例講述了js實現(xiàn)倒計時重新發(fā)送短信驗證碼功能的方法。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-手機發(fā)送短信倒計時</title> <style> button{ width: 100px; height: 30px; border: none; } input{ outline: none; } </style> <script> window.onload = function(){ function $(id){ return document.getElementById(id); } $('btn').onclick = function(){ clearInterval(timer); //清除計時器 var that = this; that.disabled = true; var count = 5; var timer = setInterval(function(){ if(count>0){ count--; that.innerHTML = "剩余時間"+ count +"s"; }else{ that.innerHTML ="重新發(fā)送短信"; that.disabled = false; clearInterval(timer); //清除計時器 } },1000); } } </script> </head> <body> <div class="box"> <input type="text" id="txt"> <button id="btn" >點擊發(fā)送短信</button> </div> </body> </html>
或者使用setTimeout來模擬,一般情況下,還是推薦使用setTimeout,更安全一些。當使用setInterval(fn,1000)時,程序是間隔1s執(zhí)行一次,但是每次程序執(zhí)行是需要3s,那么就要等程序執(zhí)行完才能執(zhí)行下一次,即實際間隔時間為(間隔時間和程序執(zhí)行時間兩者的最大值)。而setTimeout(fn,1000),代表的是,延遲1s再執(zhí)行程序,且僅執(zhí)行一次。每次程序執(zhí)行是需要3s,所以實際時間為 1s+3s=4s??梢允褂胹etTimeout遞歸調用來模擬setInterval。
<script> window.onload = function(){ function $(id){ return document.getElementById(id); } $('btn').onclick = function(){ var that = this; that.disabled = true; var count = 5; var timer = setTimeout(fn,1000); function fn(){ count--; if(count>0){ that.innerHTML = "剩余時間"+ count +"s"; setTimeout(fn,1000); }else{ that.innerHTML ="重新發(fā)送短信"; that.disabled = false; } } } } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JavaScript實現(xiàn)短信倒計時60s
- JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
- JS獲取短信驗證碼倒計時的實現(xiàn)代碼
- js實現(xiàn)短信發(fā)送倒計時功能(正則驗證)
- JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能
- JS短信驗證碼倒計時功能的實現(xiàn)(沒有驗證碼,只有倒計時)
- js發(fā)送短信倒計時的簡單實現(xiàn)方法
- 基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新,頁面關閉不進行倒計時功能)
- 基于JavaScript實現(xiàn)手機短信按鈕倒計時(超簡單)
- javascript實現(xiàn)發(fā)送短信倒計時
相關文章
js 聲明數(shù)組和向數(shù)組中添加對象變量的簡單實例
下面小編就為大家?guī)硪黄猨s 聲明數(shù)組和向數(shù)組中添加對象變量的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07微信小程序使用echarts獲取數(shù)據(jù)并生成折線圖
這篇文章主要介紹了微信小程序使用echarts獲取數(shù)據(jù)并生成折線圖,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10