?源代碼
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登錄頁面</title><!-- 引入外部CSS文件 --><link rel="stylesheet" href="styles.css">
</head>
<body><!-- 登錄頁面的容器 --><div class="login-container"><!-- 頁面標題 --><h2>登錄</h2><!-- 表單元素，用于用戶輸入 --><form id="loginForm"><!-- 用戶名輸入框 --><div class="input-group"><label for="username">用戶名:</label><!-- 輸入框必須填寫 --><input type="text" id="username" name="username" required></div><!-- 密碼輸入框 --><div class="input-group"><label for="password">密碼:</label><!-- 輸入框必須填寫 --><input type="password" id="password" name="password" required></div><!-- 提交按鈕 --><button type="submit">登錄</button></form><!-- 顯示驗證信息的容器 --><div id="message"></div></div><!-- 引入外部JavaScript文件 --><script src="script.js"></script>
</body>
</html>
?styles.css
/* 整體頁面樣式 */
body {font-family: Arial, sans-serif;background-color: #f4f4f9;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}/* 登錄頁面容器樣式 */
.login-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;
}/* 標題樣式 */
h2 {margin-bottom: 20px;
}/* 輸入框組樣式 */
.input-group {margin-bottom: 15px;text-align: left;
}/* 標簽樣式 */
label {display: block;margin-bottom: 5px;
}/* 輸入框樣式 */
input[type="text"],
input[type="password"] {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;
}/* 按鈕樣式 */
button {width: 100%;padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;
}/* 按鈕懸停樣式 */
button:hover {background-color: #0056b3;
}/* 驗證信息顯示樣式 */
#message {margin-top: 15px;color: red;
}
?script.js
// 為表單添加提交事件監聽器
document.getElementById('loginForm').addEventListener('submit', function(event) {event.preventDefault(); // 阻止表單默認提交行為，防止頁面刷新// 獲取用戶名和密碼輸入框的值var username = document.getElementById('username').value;var password = document.getElementById('password').value;var messageDiv = document.getElementById('message');// 簡單的驗證邏輯if (username === '' || password === '') {// 如果用戶名或密碼為空，顯示錯誤信息messageDiv.textContent = '用戶名和密碼不能為空';} else if (username === 'admin' && password === 'password') {// 如果用戶名和密碼匹配預定義值，顯示成功信息messageDiv.style.color = 'green';messageDiv.textContent = '登錄成功';// 這里可以添加登錄成功后的邏輯，比如重定向到其他頁面// window.location.href = 'dashboard.html';} else {// 如果用戶名或密碼不匹配，顯示錯誤信息messageDiv.textContent = '用戶名或密碼錯誤';}
});
效果圖
分析
1.?index.html
此為網頁的 HTML 結構，它定義了頁面的基本內容與布局。
- 元數據與標題：借助?
<meta>?標簽設定字符編碼與視口，頁面標題為 “登錄頁面”。 - 樣式引入：通過?
<link>?標簽引入外部 CSS 文件?styles.css，用于頁面樣式的美化。 - 登錄表單：構建了一個包含用戶名和密碼輸入框的表單，二者均為必填項。表單的?
id?為?loginForm，方便后續 JavaScript 操作。 - 消息顯示區域：利用?
<div id="message">?來顯示登錄驗證的結果信息。 - 腳本引入：通過?
<script>?標簽引入外部 JavaScript 文件?script.js，以實現表單提交的交互邏輯。
2.?styles.css
為頁面提供樣式，確保頁面具有良好的視覺效果。
- 整體頁面樣式：將頁面背景顏色設為?
#f4f4f9，使用?flexbox?布局讓登錄容器居中顯示。 - 登錄容器樣式：設置登錄容器的背景顏色為白色，添加圓角和陰影效果，寬度為 300px。
- 輸入框與按鈕樣式：為輸入框和按鈕添加了邊框、圓角和內邊距，按鈕懸停時背景顏色會發生變化。
- 驗證信息樣式：驗證信息默認顯示為紅色。
3.?script.js
實現了表單提交的交互邏輯，包含輸入驗證和登錄結果顯示。
- 事件監聽：為表單添加?
submit?事件監聽器，阻止表單的默認提交行為，避免頁面刷新。 - 輸入驗證：獲取用戶名和密碼輸入框的值，進行簡單的驗證。若用戶名或密碼為空，顯示錯誤信息；若用戶名和密碼匹配預定義值（
admin?和?password），顯示成功信息；否則，顯示錯誤信息。 - 登錄成功邏輯：在登錄成功時，可添加重定向到其他頁面的邏輯，如?
window.location.href = 'dashboard.html';。
![[matlab]matlab上安裝xgboost安裝教程簡單版](http://pic.xiahunao.cn/[matlab]matlab上安裝xgboost安裝教程簡單版)