車城國小研習用隨機抓取因材網帳號
資料更新:20250203
Embedded Files
#自行設計程式步驟
1.開啟google試算表-擴充功能-Apps Script
2.利用生成式AI生成使用 Google Apps Script (GAS) 和 HTML 創建一個網頁應用程序同時給試算表設定。依據實際需求給予promt，將生成語法複製到程式碼.gs內。
(當按下按鍵時，會隨機並不重覆從試算表中抓取一組帳號密碼，當所有帳號都出現後，給予提示所有帳號都使用完畢的GAS+html )
程式碼.GS(複製下面語法)
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function getRandomAccount(date, name) {
// 取得試算表
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1"); // 替換成你的工作表名稱
var data = sheet.getDataRange().getValues();
var accounts = [];
// 檢查日期欄位是否已存在
var dateColumnIndex = -1;
var headers = data[0];
for (var i = 2; i < headers.length; i++) { // 從第三欄開始檢查
if (headers[i] === date) {
dateColumnIndex = i;
break;
}
}
// 如果日期欄位不存在，則新增
if (dateColumnIndex === -1) {
sheet.insertColumnAfter(sheet.getLastColumn());
sheet.getRange(1, sheet.getLastColumn()).setValue(date);
dateColumnIndex = sheet.getLastColumn();
}
// 從第二行開始讀取資料 (假設第一行是標題)
for (var i = 1; i < data.length; i++) {
accounts.push({
account: data[i][0],
password: data[i][1],
name: data[i][dateColumnIndex], // 讀取使用者姓名
row: i + 1
});
}
// 過濾出未被選取且該日期也未被選取的帳號
var availableAccounts = accounts.filter(function(account) {
return !account.name; // 檢查是否已有名稱
});
// 檢查是否所有帳號都已使用
if (availableAccounts.length === 0) {
return "該日期所有帳號都已使用完畢！";
}
// 隨機選取一個帳號
var randomIndex = Math.floor(Math.random() * availableAccounts.length);
var selectedAccount = availableAccounts[randomIndex];
// 在試算表中寫入使用者姓名
sheet.getRange(selectedAccount.row, dateColumnIndex).setValue(name); // 寫入使用者姓名
return selectedAccount;
}
3.完成程式碼.gs後再新增HTML(命名為index)並複製語法貼上。
index.html檔(複製下面語法)
<!DOCTYPE html>
<html>
<head>
<title>車城國小因材網隨機帳號密碼提取</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#operation-image {
display: block; /* 讓圖片獨佔一行 */
margin: 20px 10%; /* 讓圖片置中顯示 */
max-width: 80%; /* 限制圖片最大寬度 */
height: auto; /* 讓圖片高度自動調整 */
text-align: left; /* 讓圖片向左對齊 */
}
.input-container {
display: flex;
flex-direction: column;
align-items: flex-start; /* 向左對齊 */
margin: 20px 10%; /* 與圖片對齊 */
}
.input-container label, .input-container input {
font-size: 1.5em; /* 放大字體 */
width: 100%; /* 與圖片寬度一致 */
margin: 10px 0;
}
.input-container button {
font-size: 1.5em; /* 放大字體 */
width: 100%; /* 與圖片寬度一致 */
margin-top: 10px;
}
.result-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
font-size: 2em;
}
.result-container button {
font-size: 1em;
margin-top: 20px;
}
.link-button {
font-size: 1.5em;
width: 100%;
margin-top: 10px;
text-align: center;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.link-button:hover {
background-color: #0056b3;
}
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
background-color: #f1f1f1;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 0;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>
</head>
<body>
<div id="main-content">
<h1 style="margin-left: 10%;">車城國小因材網隨機帳號密碼</h1>
<a href="https://ppt.cc/fYTp6x"><img src="https://ppt.cc/fYTp6x@.jpg" border="0" alt="PPT.cc縮圖服務" title="PPT.cc縮圖服務" id="operation-image"></a>
<div class="input-container">
<label for="date">選擇日期：</label>
<input type="date" id="date" name="date">
<label for="name">輸入姓名：</label>
<input type="text" id="name" name="name">
<button onclick="getAccount()">提取帳號密碼</button>
</div>
</div>
<div id="result" class="result-container" style="display: none;">
<div id="account-info"></div>
<button onclick="goBack()">返回首頁</button>
<a href="https://adl.edu.tw/HomePage/home/" class="link-button" target="_blank">因材網</a>
<div class="marquee">
<span>copyright@CCES資訊老師</span>
</div>
</div>
<script>
let accountCache = {};
function getAccount() {
var date = document.getElementById("date").value;
var name = document.getElementById("name").value;
var key = date + "_" + name;
if (accountCache[key]) {
displayAccount(accountCache[key]);
} else {
google.script.run.withSuccessHandler(function(result) {
accountCache[key] = result;
displayAccount(result);
}).getRandomAccount(date, name);
}
}
function displayAccount(result) {
var mainContent = document.getElementById("main-content");
var resultDiv = document.getElementById("result");
var accountInfo = document.getElementById("account-info");
mainContent.style.display = "none";
resultDiv.style.display = "flex";
if (typeof result === 'string') {
accountInfo.innerHTML = result;
} else {
accountInfo.innerHTML = "帳號：" + result.account + "<br>密碼：" + result.password;
}
}
function goBack() {
var mainContent = document.getElementById("main-content");
var resultDiv = document.getElementById("result");
mainContent.style.display = "block";
resultDiv.style.display = "none";
}
</script>
</body>
</html>
4.完成程式碼.gs及index.html後，進行部屬-設定-網頁應用程式-授予存取權，就能看到操作頁面網址。
#本程式為利用Gemini 2.0+聯發科達哥製作而成之GAS+html語法
#如果需要更改圖片，建議使用https://ppt.cc/cut/上傳圖片，在使用貼圖語法修改html檔。
Page updated
Report abuse