302 lines
8.0 KiB
HTML
302 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html
|
|
lang="zh-TW"
|
|
xmlns="http://www.w3.org/1999/html"
|
|
xmlns="http://www.w3.org/1999/html"
|
|
>
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>填表</title>
|
|
|
|
<style>
|
|
table {
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 10px 20px;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
a:link {
|
|
color: #000000;
|
|
} /* 未訪問超連結 */
|
|
|
|
a:visited {
|
|
color: #000000;
|
|
} /* 已訪問超連結 */
|
|
|
|
a:hover {
|
|
color: #1aff00;
|
|
} /* 滑鼠移動到超連結上 */
|
|
|
|
a:active {
|
|
color: #396035;
|
|
} /* 滑鼠點選時 */
|
|
|
|
h1 {
|
|
font-weight: bold;
|
|
font-family: "Arial Black", system-ui;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: bold;
|
|
font-family: "Arial Black", system-ui;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: bold;
|
|
font-family: "Arial Black", system-ui;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: bold;
|
|
font-family: "Arial Black", system-ui;
|
|
}
|
|
|
|
p {
|
|
font-weight: bold;
|
|
font-family: "Arial", system-ui;
|
|
}
|
|
|
|
.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-weight: bold;
|
|
font-family: "Arial", system-ui;
|
|
}
|
|
|
|
.button {
|
|
width: 30%;
|
|
height: 30px;
|
|
font-weight: bold;
|
|
font-family: "Arial", system-ui;
|
|
}
|
|
|
|
.form_td {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.label_title {
|
|
font-weight: bold;
|
|
font-family: "Arial Black", system-ui;
|
|
}
|
|
|
|
.label_content {
|
|
font-weight: normal;
|
|
font-family: "Arial", system-ui;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="body">
|
|
<form id="record-form">
|
|
<table>
|
|
<tr>
|
|
<td>請選擇你的名字</td>
|
|
<td>
|
|
<select id="member_select"></select>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<table>
|
|
<tr>
|
|
<td>第1刀正刀</td>
|
|
<td>
|
|
<input type="text" id="knife1_boss" placeholder="x周-y王" />
|
|
</td>
|
|
<td>第1刀正刀傷害</td>
|
|
<td>
|
|
<input type="text" id="knife1_damage" placeholder="ex: 12000000" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第1刀殘刀</td>
|
|
<td>
|
|
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
|
|
</td>
|
|
<td>第1刀殘刀傷害</td>
|
|
<td>
|
|
<input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<table>
|
|
<tr>
|
|
<td>第2刀正刀</td>
|
|
<td>
|
|
<input type="text" id="knife2_boss" placeholder="x周-y王" />
|
|
</td>
|
|
<td>第2刀正刀傷害</td>
|
|
<td>
|
|
<input type="text" id="knife2_damage" placeholder="ex: 12000000" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第2刀殘刀</td>
|
|
<td>
|
|
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
|
|
</td>
|
|
<td>第2刀殘刀傷害</td>
|
|
<td>
|
|
<input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<table>
|
|
<tr>
|
|
<td>第3刀正刀</td>
|
|
<td>
|
|
<input type="text" id="knife3_boss" placeholder="x周-y王" />
|
|
</td>
|
|
<td>第3刀正刀傷害</td>
|
|
<td>
|
|
<input type="text" id="knife3_damage" placeholder="ex: 12000000" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第3刀殘刀</td>
|
|
<td>
|
|
<input type="text" id="knife3c_boss" placeholder="x周-y王" />
|
|
</td>
|
|
<td>第3刀殘刀傷害</td>
|
|
<td>
|
|
<input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<p><button type="submit">送出</button></p>
|
|
</form>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
|
<script language="javascript" type="text/javascript">
|
|
document
|
|
.getElementById("record-form")
|
|
.addEventListener("submit", function (event) {
|
|
event.preventDefault(); // 阻止表单的默认提交行为
|
|
|
|
// 假設你有一個下拉式選單的 HTML 元素
|
|
var selectElement = document.getElementById("member_select");
|
|
|
|
var knife1_boss = document.getElementById("knife1_boss").value;
|
|
var knife1_damage = document.getElementById("knife1_damage").value;
|
|
var knife1c_boss = document.getElementById("knife1c_boss").value;
|
|
var knife1c_damage = document.getElementById("knife1c_damage").value;
|
|
|
|
var knife2_boss = document.getElementById("knife2_boss").value;
|
|
var knife2_damage = document.getElementById("knife2_damage").value;
|
|
var knife2c_boss = document.getElementById("knife2c_boss").value;
|
|
var knife2c_damage = document.getElementById("knife2c_damage").value;
|
|
|
|
var knife3_boss = document.getElementById("knife3_boss").value;
|
|
var knife3_damage = document.getElementById("knife3_damage").value;
|
|
var knife3c_boss = document.getElementById("knife3c_boss").value;
|
|
var knife3c_damage = document.getElementById("knife3c_damage").value;
|
|
|
|
// 执行登录请求
|
|
fillRecord(
|
|
selectElement.value,
|
|
knife1_boss,
|
|
knife1_damage,
|
|
knife1c_boss,
|
|
knife1c_damage,
|
|
knife2_boss,
|
|
knife2_damage,
|
|
knife2c_boss,
|
|
knife2c_damage,
|
|
knife3_boss,
|
|
knife3_damage,
|
|
knife3c_boss,
|
|
knife3c_damage
|
|
);
|
|
});
|
|
|
|
axios
|
|
.get("http://127.0.0.1:10001/api/member")
|
|
.then(function (response) {
|
|
// 在這裡處理回傳的資料
|
|
var options = response.data;
|
|
|
|
// 假設你有一個下拉式選單的 HTML 元素
|
|
var selectElement = document.getElementById("member_select");
|
|
|
|
// 將資料加入到下拉式選單中
|
|
options.forEach(function (option) {
|
|
var optionElement = document.createElement("option");
|
|
optionElement.value = option._id;
|
|
optionElement.textContent = option.playerName;
|
|
selectElement.appendChild(optionElement);
|
|
});
|
|
})
|
|
.catch(function (error) {
|
|
// 處理錯誤
|
|
console.error(error);
|
|
});
|
|
|
|
function fillRecord(
|
|
memberId,
|
|
knife1_boss,
|
|
knife1_damage,
|
|
knife1c_boss,
|
|
knife1c_damage,
|
|
knife2_boss,
|
|
knife2_damage,
|
|
knife2c_boss,
|
|
knife2c_damage,
|
|
knife3_boss,
|
|
knife3_damage,
|
|
knife3c_boss,
|
|
knife3c_damage
|
|
) {
|
|
// 发送登录请求
|
|
axios
|
|
.post("http://127.0.0.1:10001/api/record/" + memberId, {
|
|
record1: {
|
|
boss: knife1_boss,
|
|
damage: knife1_damage,
|
|
},
|
|
record1c: {
|
|
boss: knife1c_boss,
|
|
damage: knife1c_damage,
|
|
},
|
|
record2: {
|
|
boss: knife2_boss,
|
|
damage: knife2_damage,
|
|
},
|
|
record2c: {
|
|
boss: knife2c_boss,
|
|
damage: knife2c_damage,
|
|
},
|
|
record3: {
|
|
boss: knife3_boss,
|
|
damage: knife3_damage,
|
|
},
|
|
record3c: {
|
|
boss: knife3c_boss,
|
|
damage: knife3c_damage,
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
window.location.href = "./index.html";
|
|
})
|
|
.catch(function (error) {
|
|
const message = error.response.data.message;
|
|
alert("登入失敗");
|
|
//console.error('登入失敗:', error);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|