【連載】一起學前端(1) 搶購指令碼編寫

故事背景：

“jack，聽說你大學的專業是計算機科學與技術？”

“是的，領導。”

“那好，去幫我搶個榮耀v9。”

“領導，請你尊重這門專業，計算機科學是……”

“請你談談NAS裝置卷管理模組中失效資料恢復問題的應用。”

“領導，指令碼寫好了”

1。效果圖

執行的效果圖，就是模擬不斷點選換一換的效果

2。圖解

怎麼做的呢？讓我們一步步分解

右擊開啟

元素檢視

document。getElementsByClassName（“hot-refresh”）［0］

已經獲取該元素

獲取該元素

模擬點選

模擬點選

定時器每100毫秒點選一次

setInterval（function （） {

if （Date。now（） > new Date（“2017-3-21 10：08：00”）） {

document。getElementsByClassName（“hot-refresh”）［0］。click（）

}

}， 100）；

1。大於某個時間點

2。模擬點選

3。JS組成

核心（基於ECMAScript規範）

文件物件模型（DOM）

瀏覽器物件模型（BOM）

引用的DOM、BOM關係圖

window物件是BOM的頂層（核心）物件，所有物件都是透過它延伸出來的，也可以稱為window的子物件

由於window是頂層物件，因此呼叫它的子物件時可以不顯示的指明window物件，例如下面兩行程式碼是一樣的：

document。write（“www。jianshu。com”）；

window。document。write（“www。jianshu。com”）；

引用的DOM結構圖

透過這樣的樹，我們就可以很快找到我們想要操作的節點，進而進行各種屬性，方法，事件等的操作。

注意元素、屬性、和內容之間的區別，簡單的說，網頁上可見的東西叫做內容，內容是被開標籤，閉標籤抱起來的那部分：我的連結，屬性說明元素的特點

4。 chrome擴充套件程式

為什麼要打包成擴充套件程式，console的指令碼reload之後會被清空無法繼續執行，擴充套件程式是個好東西

打包成擴充套件程式

載入資料夾

開啟百度然後點選外掛

{

“name”： “第一個Chrome外掛”，

“manifest_version”： 2，

“version”： “1。0”，

“description”： “jack的第一個chrome擴充套件程式”，

“browser_action”： {

“default_icon”： “logo。png”

}，

“content_scripts”： ［

{

“matches”： ［“https：//www。baidu。com/*”］，

“js”： ［“content。js”］

}

］

}

setInterval（function （） {

if （Date。now（） > new Date（“2017-3-21 10：08：00”）） {

document。getElementsByClassName（“hot-refresh”）［0］。click（）

}

}， 100）；

5。 阿里月餅指令碼分析

setInterval（function（） {

if（Date。now（） >= new Date（“2016-09-12 15：59：00”）） {

$（“#seckillQuantity”）。val（1）；//1盒

$（“。buyButtons。J_buyButtons”）。click（）；//搶購按鈕

var value = $（“。answerList”）。children（）。eq（0）。html（）； //驗證碼取值

$（‘#randomAnswer’）。val（value）；//驗證碼填值

$（‘。answer-button’）。children（）。eq（0）。click（）；//提交驗證碼

}

}， 10）

6。 華為榮耀V9搶購

v9

檢視元素

setInterval（function （） {

if （Date。now（） > new Date（“2017-3-21 10：08：00”）） { //時間修改為當天的10：08

document。getElementsByClassName（“button-style-disabled-1 button-event-disabled”）［0］。click（）

//class得看10：08分後的 複製下來就行，明天看看 更新下

}

}， 10）；

放到chrome擴充套件程式就不會被reload清空了

7。附上一個檢視密碼的技巧

持續更新中，歡迎大家與我一起交流