js 傳送簡訊驗證碼
阿新 • • 發佈：2019-02-10
<body>
<input type="" name="" id="txt" value="" /><button id="btn">傳送簡訊驗證碼</button>
</body>
<script type="text/javascript">
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var count = 5; // 存放資料的
var timer = null; // 存放定時器
/*
* btn 點選事件，首先清除定時器，設定btn按鈕不可用，
* 裡面一個函式，設定一個定時器使這個函式每隔一秒執行，
* 當count>=0,設定btn的內容為還剩下count秒，
* 否則內容為重新發送簡訊，btn可以點選使用，清楚定時器，使count =5，
*/
btn.onclick = function(){
clearInterval(timer); // 首先清除定時器 ，防止出現再次點選越來越快的情況
//alert(11);
this.disabled = true;
var that = this; // 所以 var 一個變數 來存放 btn 的 this
timer = setInterval(send,1000); // 開啟定時器
function send(){
count--;
if(count >= 0){
//this.innerHTML = ""; // 這裡的this 指的是呼叫者定時器 而我們需要的是btn
that.innerHTML = "還有"+ count +"秒"; // 這裡的that 指的是btn 而不是定時器
}else{
that.innerHTML = "重新發送簡訊";
that.disabled = false;
clearInterval(timer); // 清楚定時器
count = 5;
}
}
}
<input type="" name="" id="txt" value="" /><button id="btn">傳送簡訊驗證碼</button>
</body>
<script type="text/javascript">
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var count = 5; // 存放資料的
var timer = null; // 存放定時器
/*
* btn 點選事件，首先清除定時器，設定btn按鈕不可用，
* 裡面一個函式，設定一個定時器使這個函式每隔一秒執行，
* 當count>=0,設定btn的內容為還剩下count秒，
* 否則內容為重新發送簡訊，btn可以點選使用，清楚定時器，使count =5，
*/
btn.onclick = function(){
clearInterval(timer); // 首先清除定時器 ，防止出現再次點選越來越快的情況
//alert(11);
this.disabled = true;
var that = this; // 所以 var 一個變數 來存放 btn 的 this
timer = setInterval(send,1000); // 開啟定時器
function send(){
count--;
if(count >= 0){
//this.innerHTML = ""; // 這裡的this 指的是呼叫者定時器 而我們需要的是btn
that.innerHTML = "還有"+ count +"秒"; // 這裡的that 指的是btn 而不是定時器
}else{
that.innerHTML = "重新發送簡訊";
that.disabled = false;
clearInterval(timer); // 清楚定時器
count = 5;
}
}
}
</script>
效果：
