利用 JS 指令碼實現網頁全自動秒殺搶購

qwer1030274531發表於2021-01-12
JS指令碼網頁

利用 JS 指令碼實現網頁全自動秒殺搶購

倒數計時頁面：截圖2020-10-11 13.26.18

倒數計時未結束時，購買按鈕還不能點選。

結束時，可以點選購買，點選後出現提示“付款成功”

截圖2020-10-11 13.26.39

展示效果

1.製作測試網頁

首先我們來做一個簡易的搶購頁面

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Apple</title>
    <style type="text/css">
        body {
            background-color: black;
        }

        #hOne{
            color: white;
            font-size: 50px;
            font-family: PingFangSC-Regular, sans-serif;
            line-height: 1px;
            width: 100%;
            text-align: center;
        }

        #hTwo{
            color: #d01f2a;
            font-size: 20px;
            text-align: center;
        }

        #hThree{
            color: white;
            font-size: 30px;
            line-height: 30px;
            font-family: PingFangSC-Regular, sans-serif;
            text-align: center;
        }

        #div1 {
            color: white;
            margin: auto;
        }

        #endTime {
            color: #2997ff;
        }

        img {
            width: 228px;
            height: 366px;
            border: 0px;
        }
    </style>
</head>
<body>
<br /><br />
<h1 id="hOne"> WATCH</h1>
<h2 id="hTwo">S E R I E S  6</h2>
<h3 id="hThree">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;健康的未來，現在戴上。</h3>
<div align="center" id="div1">
    <img src="apple%20watch.jpeg">
    <p id="time">預售倒數計時 <span id="endTime"></span> 秒！</p>
    <input type="button" id="btn" value="立即購買" disabled="disabled"><br />
</div>
</body>
</html>

展示一下：

截圖2020-10-11 13.40.16

2.倒數計時及購買功能的實現

我們使用的是jQuery框架，jQuery 極大地簡化了 JavaScript 程式設計。

<script type="text/javascript" src="script/jquery-1.7.2.js"></script> // 匯入jquery
<script type="text/javascript">
        $(function () {
            var timeElement = $("#endTime")[0]; // 獲得倒數計時dom物件
            var  i = 10;
            function remainTime() {
                if (i > 0) {
                    timeElement.innerHTML = i--;
                    setTimeout(function () {
                        remainTime();
                    }, 1000);
                }
                if (i == 0) {
                    $("#time")[0].innerHTML = "線上選購開始";
                    $("#time").css({color: "#2997ff"});
                    $("#btn")[0].disabled = false; // 倒數計時結束，按鈕可以點選
                }
            }
            remainTime();

            $("#btn").click(function () { // 點選事件
                alert("我們已收到您的付款，正在處理您的訂單");
            });
        });
</script>

3.使用 JS 指令碼實現自動搶購功能

（1）在瀏覽器中開啟開發者工具

​ 截圖2020-10-11 13.51.38

（2）找到按鈕元素標籤所在位置

截圖2020-10-11 13.53.52

（3）JS 搶購指令碼
var btnObj = document.getElementById("btn"); // 第二步中可知 id=“btn"
var timer = setInterval(function () {
                if (btnObj.disabled == false) { // 當按鈕可以點選時
                    btnObj.click();		//點選
                    clearInterval(timer); // 選購完成後關閉timer，否則將一直購買，土豪隨意
                }
            });
（4）在控制檯中執行 JS指令碼

看懂第三步的程式碼後，就可以在控制檯中執行了

將第三步的程式碼複製貼上到控制檯中

截圖2020-10-11 14.09.42

注意：控制檯中Enter為執行， Enter + Shift為換行， 指令碼應在倒數計時結束前注入

最終結果

可以參考學習，切勿拿來做有違道德，謀取利益的事。

相關文章