javascript实现发送信息样式案例

最新推荐文章于 2024-03-17 17:15:54 发布

拂晓等明月

最新推荐文章于 2024-03-17 17:15:54 发布

阅读量177

点赞数

分类专栏： javascript练习文章标签： JavaScript 事件监听定时器倒计时按钮交互

本文链接：https://blog.csdn.net/qq_61320547/article/details/125300735

版权

javascript练习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

如下：

代码如下：

<!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 but = document.querySelector('button');
        var hjian = 5;
        // 添加事件
        but.addEventListener('click', function() {
            // 点击后按钮禁用
            but.disabled = true;
            // 添加定时器
            var ding = setInterval(function() {
                // 添加循环语句判断按钮状态
                if (hjian == 0) {
                    // 当秒数归零
                    // 清除定时器
                    clearInterval(ding);
                    // 按钮恢复
                    but.disabled = false;
                    but.innerHTML = '发送';
                    hjian = 5; //重新计算
                } else {
                    but.innerHTML = '还剩下' + hjian + '秒';
                    // 每次循环数字减一
                    hjian--;
                }
            }, 1000)

        })
    </script>
</body>

</html>