JavaScript-207：发送短信案例

臧小川

已于 2022-02-23 17:42:35 修改

阅读量326

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端 css3

于 2022-02-23 17:24:58 首次发布

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/123095089

版权

JavaScript 倒计时事件监听 DOM操作定时器

关键词由CSDN通过智能技术生成

JavaScript基础专栏收录该内容

240 篇文章 25 订阅

订阅专栏

效果图

按钮点击之后会禁用 disabled 为 true
同时按钮里面的内容会变化注意 button里面的内容通过 innerHTML 修改
面秒数是有变化的因此需要用到定时器
定义一个变量在定时器里面不断递减
如果变量为 0 说明到了时间我们需要停止定时器并且复原按钮初始状态

结构

    手机号码：<input type="number"> <button>发送</button>

JS

        var btn = document.querySelector('button');
        var timer = 3;
        btn.addEventListener('click', function ()
        {
            this.disabled = true;
            var time = setInterval(function ()
            {
                if (timer == 0)
                {
                    btn.innerHTML = '发送';
                    btn.disabled = false;
                    clearTimeout(time);
                    timer = 10;
                } else
                {
                    btn.innerHTML = '还有' + timer + '秒结束';
                    timer--;
                }
            }, 1000)
        })