快捷導(dǎo)航

javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)

更新時(shí)間：2021年09月30日 10:30:59 作者：qq_39111074

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)思路：

1、js獲取發(fā)送按鈕元素對(duì)象
2、設(shè)置一個(gè)發(fā)送間隔時(shí)間（全局變量）
3、給發(fā)送按鈕元素對(duì)象綁定點(diǎn)擊事件- - -onclick,
點(diǎn)擊事件處理程序：
① 點(diǎn)擊后俺按鈕設(shè)置成禁用—disabled：true;
② 使用定時(shí)函數(shù)，時(shí)間間隔為1秒，
定時(shí)函數(shù)調(diào)用的函數(shù)處理程序：
判斷時(shí)間是否為0
不為0- - -按鈕里的描述內(nèi)容變?yōu)椋菏Ｓ喽嗌倜?，且時(shí)間減1
為0- - -則恢復(fù)按鈕可以點(diǎn)擊狀態(tài)，里面的描述內(nèi)容恢復(fù)成“發(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">
        手機(jī)號(hào)碼：<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) {
                    // 清除定時(shí)器和復(fù)原按鈕
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '發(fā)送短信';
                    time = 10;
                } else {
                    btn.innerHTML = '剩余' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>
</body>

</html>

頁(yè)面效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09
echarts提示框tooltip被遮擋的解決辦法分享
這篇文章主要給大家介紹了關(guān)于echarts提示框tooltip被遮擋的解決辦法, 在制作圖表中,發(fā)現(xiàn)有時(shí)候tooltip會(huì)被線條遮擋或者被柱子折線遮擋,這種情況會(huì)偶爾出現(xiàn),需要的朋友可以參考下
2023-08-08
JS document form表單元素操作完整示例
這篇文章主要介紹了JS document form表單元素操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript form表單元素獲取、輸出、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01
原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能，可以開(kāi)始、暫停、清除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
javascript拖拽上傳類庫(kù)DropzoneJS使用方法
這篇文章主要介紹了javascript拖拽上傳類庫(kù)DropzoneJS使用方法，大家參考使用吧
2013-12-12
詳解JavaScript中的執(zhí)行上下文
執(zhí)行上下文是JavaScript中非常重要的概念，它決定了代碼的執(zhí)行順序和作用域鏈等重要信息，下面我們就來(lái)深入探討JavaScript執(zhí)行上下文的概念和工作原理吧
2023-07-07
JavaScript實(shí)現(xiàn)輸入框(密碼框)出現(xiàn)提示語(yǔ)
有時(shí)候我們需要在登陸表單有一些提示語(yǔ)言，比如“請(qǐng)輸入用戶名”和“請(qǐng)輸入密碼”等語(yǔ)言，通過(guò)本文給大家介紹JavaScript實(shí)現(xiàn)輸入框(密碼框)出現(xiàn)提示語(yǔ)的相關(guān)知識(shí)，對(duì)js實(shí)現(xiàn)輸入框提示相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
javascript實(shí)現(xiàn)的固定位置懸浮窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的固定位置懸浮窗口,以一個(gè)完整實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法,涉及javascript數(shù)組對(duì)象遍歷、事件監(jiān)聽(tīng)、處理等相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
關(guān)于JS中的apply,call,bind的深入解析
下面小編就為大家?guī)?lái)一篇關(guān)于JS中的apply,call,bind的深入解析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-04-04