JS基础-发送短信案例

83 阅读 0 评论 55 点赞

我是靠谱客的博主笨笨鞋子，最近开发中收集的这篇文章主要介绍JS基础-发送短信案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需要实现的效果：

点击发送之后实现倒计时效果：

思路：设置按钮点击事件，然后设置一个定时器，每过1s就重新设置button里面的innerHTML，最后判断为0s的时候就清除定时器，还原button里面的内容为“发送”，完整代码如下：

<!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>发送短信</title>
</head>

<body>
    手机号码：<input type="number" name="" id=""><button>发送</button>
    <script>
        // 获取按钮元素
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            var timer = 60;
            btn.disabled = true;
            btn.innerHTML = '还剩60秒可再次点击'
                // 点击按钮之后开始进行倒计时 每隔一秒减一次
            var times = window.setInterval(function() {
                if (timer === 0) {
                    // 清除定时器
                    window.clearInterval(times);
                    btn.disabled = false;
                    btn.innerHTML = '发送'

                } else {
                    timer = timer - 1;
                    btn.innerHTML = '还剩' + timer + '秒可再次点击'
                }
            }, 1000)
        })
    </script>
</body>

</html>