关于JS按钮倒计时禁用的小Demo

最新推荐文章于 2023-03-02 19:35:56 发布

黄艳妤

最新推荐文章于 2023-03-02 19:35:56 发布

阅读量373

点赞数

分类专栏：机试题学习总结文章标签：遇到的机试题

本文链接：https://blog.csdn.net/weixin_42651736/article/details/101772462

版权

学习总结同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

机试题

1 篇文章 0 订阅

订阅专栏

萌新上路day1:
学习内容：
JS的关于按钮禁用和倒计时的方法。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            font-size: 15px;
        }

        .btn{
            background-color: red;
        }

        .disabled{
            color: grey;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button id="send-btn" class="btn" οnclick="send()">发送</button>

    <script src="jquery-1.11.0.jar"></script>
    <script>
        var n;
        let interval;
        function send() {
            n=10;
        //    JS
        //    点击按钮之后
        //    1 让按钮变灰
            document.getElementById("send-btn").setAttribute("class","disabled");
        //    2 控制台打印已发送
            console.log("已发送");
        //    3 开始10s倒计时，并且按钮文字变为"重新发送(n)秒，n为倒计时的数组"
            document.getElementById("send-btn").disabled=true;
             interval = window.setInterval(timeCoumt,1000);

        //    4 在倒计时的时候，再次点击按钮不能重新开始计时

        //    PS：倒计时不能出现负数。
        }

        function timeCoumt() {
            if (n>0) {
                console.log(n);
                document.getElementById("send-btn").innerHTML = "重新发送(" + n + ")秒";
                n--;
            }else if (n==0){
                //    5 倒计时结束之后，文字变为重新发送，按钮变为初始颜色，再次点击跳到步骤一。
                document.getElementById("send-btn").innerHTML="重新发送";
                document.getElementById("send-btn").setAttribute("class","btn");
                document.getElementById("send-btn").disabled=false;
                clearInterval(interval);
            }
        }

    </script>
</body>
</html>

黄艳妤

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
关于JS按钮倒计时禁用的小Demo

萌新上路day1:学习内容：JS的关于按钮禁用和倒计时的方法。实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...
复制链接

扫一扫