发送短信案例2020/11/24

最新推荐文章于 2021-09-24 11:18:37 发布

【5】吴润泽

最新推荐文章于 2021-09-24 11:18:37 发布

阅读量109

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_50286102/article/details/110098696

版权

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

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

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

<body>
    手机号码：<input type="number">
    <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送'
                } else {
                    btn.innerHTML = '还剩下' + time + '秒'
                    time--;
                }
            }, 1000)





        })
    </script>

</body>

</html>

【5】吴润泽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发送短信案例2020/11/24

按钮点击之后，会禁用 disabled 为true同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改里面秒数是有变化的，因此需要用到定时器定义一个变量，在定时器里面，不断递减如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="
复制链接

扫一扫