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

qwer1030274531發表於2021-01-12

利用 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>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061

展示一下:

截圖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>12345678910111213141516171819202122232425

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,否則將一直購買,土豪隨意
                }
            });1234567
(4)在控制檯中執行 JS指令碼

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

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

截圖2020-10-11 14.09.42

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

最終結果

在這裡插入圖片描述

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/30239065/viewspace-2749313/,如需轉載,請註明出處,否則將追究法律責任。

相關文章