如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁全自動秒殺搶購功能

更新時間：2020年10月12日 09:33:22 作者：CHAN_傑

這篇文章主要介紹了如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁全自動秒殺搶購功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

倒計時頁面：

倒計時未結(jié)束時，購買按鈕還不能點(diǎn)擊。

結(jié)束時，可以點(diǎn)擊購買，點(diǎn)擊后出現(xiàn)提示“付款成功”

展示效果 GIF

1.制作測試網(wǎng)頁

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

<!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;健康的未來，現(xiàn)在戴上。</h3>
<div align="center" id="div1">
 <img src="apple%20watch.jpeg">
 <p id="time">預(yù)售倒計時 <span id="endTime"></span> 秒！</p>
 <input type="button" id="btn" value="立即購買" disabled="disabled"><br />
</div>
</body>
</html>

展示一下：

2.倒計時及購買功能的實(shí)現(xiàn)

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

<script type="text/javascript" src="script/jquery-1.7.2.js"></script> // 導(dǎo)入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; // 倒計時結(jié)束，按鈕可以點(diǎn)擊
    }
   }
   remainTime();

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

3.使用 JS 腳本實(shí)現(xiàn)自動搶購功能

（1）在瀏覽器中打開開發(fā)者工具

（2）找到按鈕元素標(biāo)簽所在位置

（3）JS 搶購腳本

var btnObj = document.getElementById("btn"); // 第二步中可知 id=“btn"
var timer = setInterval(function () {
    if (btnObj.disabled == false) { // 當(dāng)按鈕可以點(diǎn)擊時
     btnObj.click();		//點(diǎn)擊
     clearInterval(timer); // 選購?fù)瓿珊箨P(guān)閉timer，否則將一直購買，土豪隨意
    }
   });

（4）在控制臺中運(yùn)行 JS腳本

看懂第三步的代碼后，就可以在控制臺中運(yùn)行了

將第三步的代碼復(fù)制粘貼到控制臺中