快捷導(dǎo)航

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

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

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

倒計(jì)時(shí)頁(yè)面：

倒計(jì)時(shí)未結(jié)束時(shí)，購(gòu)買(mǎi)按鈕還不能點(diǎn)擊。

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

展示效果 GIF

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

首先我們來(lái)做一個(gè)簡(jiǎn)易的搶購(gòu)頁(yè)面

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

展示一下：

2.倒計(jì)時(shí)及購(gòu)買(mǎi)功能的實(shí)現(xiàn)

我們使用的是jQuery框架，jQuery 極大地簡(jiǎn)化了 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]; // 獲得倒計(jì)時(shí)dom對(duì)象
   var i = 10;
   function remainTime() {
    if (i > 0) {
     timeElement.innerHTML = i--;
     setTimeout(function () {
      remainTime();
     }, 1000);
    }
    if (i == 0) {
     $("#time")[0].innerHTML = "在線選購(gòu)開(kāi)始";
     $("#time").css({color: "#2997ff"});
     $("#btn")[0].disabled = false; // 倒計(jì)時(shí)結(jié)束，按鈕可以點(diǎn)擊
    }
   }
   remainTime();

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

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

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

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

（3）JS 搶購(gòu)腳本

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

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

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

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

注意：控制臺(tái)中Enter為運(yùn)行， Enter + Shift為換行，腳本應(yīng)在倒計(jì)時(shí)結(jié)束前注入

最終結(jié)果 GIF

可以參考學(xué)習(xí)，切勿拿來(lái)做有違道德，謀取利益的事。

到此這篇關(guān)于如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)功能的文章就介紹到這了,更多相關(guān)js網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: