js发送短信案例

发送短信

一、案例分析

1、按钮点击后，

①需禁用按钮diaabled为true

②同时按钮里面的内容会发生变化

2、按钮里面的倒计时秒数会发生变化，此时需要用到定时器，定义一个变量，在定时器里不断递减

3、需要设置一个判断条件，如果变量为0，说明到了时间，此时需要

①停止定时器（清除定时器）

②复原按钮的初始状态

③将变量设为初值

二、代码实现

html代码

<body>
    <input type="text" name="" id="">
    <button>发送</button>
</body>

js代码

<script>
    var button = document.querySelector('button');
    var time = 3;
    var timer = null;
    button.addEventListener('click', function() {
        button.disabled = true;
        timer = window.setInterval(function() {
            if (time == 0) {
                // 清除定时器、复原按钮、复原变量
                window.clearInterval(timer)
                button.disabled = false;
                button.innerHTML = '发送';
                time = 3;
            } else {
                button.innerHTML = '还剩' + time + '秒';
                time--;
            }
        }, 1000)
    })
</script>

三、效果展示

 

点击后：

 

 

posted @ 2021-07-07 14:59  蛋蛋仔  阅读(463)  评论(0)  编辑  收藏  举报