之前介紹過使用temperMonkey遮蔽CSDN廣告的方法，主要就是要針對性地分析網站結構，然後用程式碼去改變或者操作DOM。今天也一樣，我們需要觀察網頁結構，找到我們要操作的按鈕，觸發他的click事件就可以了。下面以公司打卡簽到的網站為例，做一些壞壞的事情。本文讀者最好有一定的HTML和JavaScript基礎。

首先，想象一下你去簽到需要做什麼：

• 開啟網站
• 登陸
• 點選“簽到”按鈕

然後每一步我們都可以讓程式碼幫我們去做。

0. 如何定時

這段程式碼是核心，就是根據當前時間和設定的時間做差值，來確定定時器的值
看懂這段程式碼，後面的就都容易了。都是在利用定時器觸發callback。

// user setting
const SIGN_IN_TIME = "09:30:00"; // 簽到時間
const SIGN_OUT_TIME = "20:00:00"; // 簽退時間

// code implementation
logTime("code start running");
const now = new Date();
const today = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
var signInTime = +new Date(`${today} ${SIGN_IN_TIME}`);
logTime("signInTime",new Date(signInTime));
var signOutTime = +new Date(`${today} ${SIGN_OUT_TIME}`);
logTime("signOutTime",new Date(signOutTime));
// diff in or out
if (now > signInTime && now < signOutTime) {
 // ready to sign out for today
 console.log("Seconds to sign out for today: " + (signOutTime - now) / 1000);
 setTimeout(callback,signOutTime - now);
} else {
 // ready to sign in for tomorrow
 signInTime = +signInTime + 60 * 60 * 24 * 1000;
 console.log("Seconds to sign in for tomorrow: " + (signInTime - now) / 1000);
 setTimeout(callback,signInTime - now);
}

function logTime(str,time = new Date()) {
 console.log(`${str} -> ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`);
}

1. 定時自動開啟網站

因為大多數網站都有，“長時間未操作-自動退出”的設定。所以我們要在需要打卡的時候再開啟網站。
在電腦本地跑一個程式，使用定時器。這裡跑一個node程式：

const open = require('open');
logTime("Start Runing");

// user setting
const SIGN_IN_TIME = "09:30:00";
const SIGN_OUT_TIME = "20:20:00";

// code implementation
const openBrowser = async () => {
 await open('http://172.10.80.42');
};
logTime("code start running");
const now = new Date();
const today = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
var signInTime = +new Date(`${today} ${SIGN_IN_TIME}`);
logTime("signInTime",new Date(signOutTime));
// diff in or out
if (now > signInTime && now < signOutTime) {
 // ready to sign out for today
 console.log("Seconds to sign out for today: " + (signOutTime - now) / 1000);
 setTimeout(openBrowser,signOutTime - now);
} else {
 // ready to sign in for tomorrow
 signInTime = +signInTime + 60 * 60 * 24 * 1000;
 console.log("Seconds to sign in for tomorrow: " + (signInTime - now) / 1000);
 setTimeout(openBrowser,time = new Date()) {
 console.log(`${str} -> ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`);
}

2. 自動登入

這個重點還是在於找到需要填入內容的DOM元素

(function() {
 'use strict';
 // login
 document.querySelector("#loginid").value = "使用者名稱";
 document.querySelector("#userpassword").value = "密碼";
 document.querySelector("#login").click();
})();

3. 定時點選按鈕

這一步最重要的是要準確找到按鈕，檢查元素慢慢查詢吧。
其次，設定好籤到和簽退的時間，只有固定時間才會自動簽到，防止每次登陸進來自動簽到或簽退，這樣太頻繁被發現。

(function() {
 'use strict';

 // user setting
 const SIGN_IN_TIME = "09:00:00";
 const SIGN_OUT_TIME = "21:00:00";

 // code implementation
 logTime("code start running");
 const now = new Date();
 const today = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
 var signInTime = +new Date(`${today} ${SIGN_IN_TIME}`);
 logTime("signInTime",new Date(signInTime));
 var signOutTime = +new Date(`${today} ${SIGN_OUT_TIME}`);
 logTime("signOutTime",new Date(signOutTime));
 // diff in or out
 if(now > signInTime && now < signOutTime) {
 // ready to sign out for today
 console.log("Seconds to sign out for today: " + (signOutTime - now)/1000);
 setTimeout(signInorSignOut,signOutTime - now);
 } else {
 // ready to sign in for tomorrow
 signInTime = +signInTime + 60 * 60 * 24 * 1000;
 console.log("Seconds to sign in for tomorrow: " + (signInTime - now)/1000);
 setTimeout(signInorSignOut,signInTime - now);
 }

 // signInorSignOut
 function signInorSignOut(){
 logTime(`signInButton clicked!`);
 // 重點就在這兒了，找到網站的簽到按鈕#signInButton，並觸發他的點選事件
 document.querySelector("#signInButton").click();
 }

 function logTime(str,time=new Date()){
 console.log(`${str} -> ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`);
 }
})();

4. 結束

一套操作，打完收工。每天下班的時候，不管是提前溜還是晚點到。記得本地開一下程式：

node timer.js

到此這篇關於JS指令碼實現定時到網站上籤到/簽退功能的文章就介紹到這了,更多相關js 定時簽到簽退內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！