js练习发送短信案例

最新推荐文章于 2022-06-22 15:12:38 发布

飞天小女侠~

最新推荐文章于 2022-06-22 15:12:38 发布

阅读量234

点赞数

分类专栏：前端案例练习文章标签： javascript

本文链接：https://blog.csdn.net/xuan971130/article/details/123896841

版权

前端案例练习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

1.实现效果：

点击发送后，按钮开始倒计时。同时失去点击功能，倒计时结束后，恢复正常。

2.思想：

3.代码：

<!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"><button>发送</button>
    <script>
        var input = document.querySelector('input');
        var button = document.querySelector('button');
  
        button.addEventListener('click', function() {
            button.disabled = true;
            button.innerHTML = '还剩下10s';
            var number = 10;
            var interval = setInterval(function() {
                if(number == 0) {
                    clearInterval(interval);
                    button.innerHTML = '发送';
                    button.disabled = false;
                    number = 10;//前往不要忘了重新给它赋值。
                } else {
                    number--;
                    button.innerHTML = '还剩下'+number+'s';
                }
            },1000);
         
            
            
        })
    </script>
</body>
</html>

飞天小女侠~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js练习发送短信案例

1.实现效果：点击发送后，按钮开始倒计时。同时失去点击功能，倒计时结束后，恢复正常。2.思想：3.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte..
复制链接

扫一扫