js实现倒计时抢购功能

小天博客

于 2024-05-02 16:46:30 发布

阅读量137

点赞数 4

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_63615119/article/details/138394596

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.抢购页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p id="endtime">
            活动倒计时<span id="countdown">10</span>秒！
        </p>
        <input type="button" id="btn" value="立即购买" disabled>
    </div>
    <script type="text/javascript">
        const countdownElement = document.getElementById('countdown');
        const buttonElement = document.getElementById('btn');
        const COUNTDOWN_DURATION = 10;
        const COUNTDOWN_INTERVAL = 1000;

        let countdown = COUNTDOWN_DURATION;

        function updateCountdown() {
            countdownElement.textContent = countdown;
            countdown--;
            if (countdown >= 0) {
                setTimeout(updateCountdown, COUNTDOWN_INTERVAL);
            } else {
                buttonElement.disabled = false;
            }
        }

        updateCountdown();

        function handleButtonClick() {
            alert("恭喜你抢到一个月饼");
            console.log('禁用按钮并移除事件监听器');
            buttonElement.disabled = true; // 防止重复点击
            buttonElement.removeEventListener('click', handleButtonClick);
        }

        buttonElement.addEventListener('click', handleButtonClick);

//抢购脚本
// var btnObj = document.getElementById("btn"); // 第二步中可知 id=“btn"
// var timer = setInterval(function () {
//     if (btnObj.disabled == false) { // 当按钮可以点击时
//         btnObj.click();		//点击
//         clearInterval(timer); // 选购完成后关闭timer，否则将一直购买，土豪随意
//     }
// });
    </script>
</body>

</html>

2.js代码

var btnObj = document.getElementById("btn"); // 第二步中可知 id=“btn"
var timer = setInterval(function () {
    if (btnObj.disabled == false) { // 当按钮可以点击时
        btnObj.click();		//点击
        clearInterval(timer); // 选购完成后关闭timer，否则将一直购买，土豪随意
    }
});

将代码粘到控制台，并回车，注意在倒计时结束前