javascript實現(xiàn)發(fā)送短信倒計時
更新時間：2021年09月30日 10:30:59 作者：qq_39111074
這篇文章主要為大家詳細介紹了javascript實現(xiàn)發(fā)送短信倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)發(fā)送短信倒計時的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)思路：
1、js獲取發(fā)送按鈕元素對象
2、設置一個發(fā)送間隔時間（全局變量）
3、給發(fā)送按鈕元素對象綁定點擊事件- - -onclick,
點擊事件處理程序：
① 點擊后俺按鈕設置成禁用—disabled：true;
② 使用定時函數(shù)，時間間隔為1秒，
定時函數(shù)調用的函數(shù)處理程序：
判斷時間是否為0
不為0- - -按鈕里的描述內(nèi)容變?yōu)椋菏Ｓ喽嗌倜?，且時間減1
為0- - -則恢復按鈕可以點擊狀態(tài)，里面的描述內(nèi)容恢復成“發(fā)送”
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>發(fā)送短信</title>
<style>
.box {
width: 360px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
手機號碼：<input type="number">
<button>發(fā)送短信</button>
</div>
<script>
var btn = document.querySelector('button');
var time = 10;
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定時器和復原按鈕
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '發(fā)送短信';
time = 10;
} else {
btn.innerHTML = '剩余' + time + '秒';
time--;
}
}, 1000);
});
</script>
</body>
</html>
頁面效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript實現(xiàn)短信倒計時60s
- JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
- JS獲取短信驗證碼倒計時的實現(xiàn)代碼
- js實現(xiàn)短信發(fā)送倒計時功能（正則驗證）
- js實現(xiàn)5秒倒計時重新發(fā)送短信功能
- JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能
- JS短信驗證碼倒計時功能的實現(xiàn)（沒有驗證碼，只有倒計時）
- js發(fā)送短信倒計時的簡單實現(xiàn)方法
- 基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新，頁面關閉不進行倒計時功能)
- 基于JavaScript實現(xiàn)手機短信按鈕倒計時(超簡單)
相關文章
JS實現(xiàn)滑動菜單效果代碼(包括Tab,選項卡,橫向等效果)
這篇文章主要介紹了JS實現(xiàn)滑動菜單效果代碼,以實例形式實現(xiàn)了包括Tab,選項卡,橫向等效果,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關于echarts提示框tooltip被遮擋的解決辦法, 在制作圖表中,發(fā)現(xiàn)有時候tooltip會被線條遮擋或者被柱子折線遮擋,這種情況會偶爾出現(xiàn),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了JS document form表單元素操作,結合完整實例形式詳細分析了JavaScript form表單元素獲取、輸出、遍歷等相關操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了原生js實現(xiàn)秒表計時器功能，可以開始、暫停、清除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
javascript拖拽上傳類庫DropzoneJS使用方法
這篇文章主要介紹了javascript拖拽上傳類庫DropzoneJS使用方法，大家參考使用吧2013-12-12
執(zhí)行上下文是JavaScript中非常重要的概念，它決定了代碼的執(zhí)行順序和作用域鏈等重要信息，下面我們就來深入探討JavaScript執(zhí)行上下文的概念和工作原理吧2023-07-07
JavaScript實現(xiàn)輸入框(密碼框)出現(xiàn)提示語
有時候我們需要在登陸表單有一些提示語言，比如“請輸入用戶名”和“請輸入密碼”等語言，通過本文給大家介紹JavaScript實現(xiàn)輸入框(密碼框)出現(xiàn)提示語的相關知識，對js實現(xiàn)輸入框提示相關知識感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了javascript實現(xiàn)的固定位置懸浮窗口,以一個完整實例形式詳細分析了javascript實現(xiàn)固定位置懸浮窗口的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS實現(xiàn)從對象獲取對象中單個鍵值的方法,涉及javascript數(shù)組對象遍歷、事件監(jiān)聽、處理等相關操作技巧,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄P于JS中的apply,call,bind的深入解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04