zhao
在本文中，我們將探討兩個常見的編程任務——猜數字遊戲與創建一個簡單的表白牆。這兩個項目都適合作爲前端開發者的練習題目，它們涉及到HTML、CSS以及JavaScript的基本知識。讓我們開始吧！
1. 猜數字遊戲
這是一個經典的編程小遊戲，其基本規則如下：
- 程序隨機生成一個數字，用戶需要通過輸入來猜測這個數字。
- 根據用戶的猜測，程序會給出反饋，例如“大了”或“小了”，以幫助用戶逐漸接近正確答案。
- 當用戶最終猜中時，遊戲結束並顯示祝賀信息。
以下是如何使用純JavaScript實現這個遊戲的步驟：
HTML結構
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>猜數字遊戲</title>
</head>
<body>
<h1>猜數字遊戲</h1>
<p>請輸入一個整數來猜測隨機產生的數字：</p>
<input type="number" id="guessInput" placeholder="輸入您的猜測">
<button onclick="checkGuess()">猜測</button>
<p id="result"></p>
</body>
</html>
這段HTML定義了一個基本的網頁佈局，包含了一個文本輸入框和一個按鈕用於接收用戶的猜測，還有一個段落標籤用來展示結果。
CSS樣式
爲了使頁面更加美觀，我們可以添加一些基本的CSS樣式：
h1 {
text-align: center;
}
#guessInput {
width: 200px;
margin: 10px auto;
}
#result {
margin: 10px auto;
}
這些樣式將使得輸入框居中對齊，並且爲結果段落設置中心對齊的樣式。
JavaScript邏輯
接下來我們編寫JavaScript部分來實現遊戲邏輯：
let secretNumber = Math.floor(Math.random() * 100) + 1; // 產生一個1到99之間的隨機數字
function checkGuess() {
const guess = document.getElementById('guessInput').value;
if (isNaN(guess)) { // 判斷是否為有效數字
document.getElementById('result').innerHTML = '請輸入有效的數字';
return;
} else if (+guess === secretNumber) { // 如果猜中了
document.getElementById('result').innerHTML = `恭喜！您剛好猜中${secretNumber}`;
document.getElementById('guessInput').disabled = true; // 禁用輸入框
document.getElementsByTagName('button')[0].disabled = true; // 禁用按鈕
} else if (+guess > secretNumber) {
document.getElementById('result').innerHTML = '小了';
} else if (+guess < secretNumber) {
document.getElementById('result').innerHTML = '大了';
}
}
這段JavaScript代碼首先定義了一個祕密數字變量`secretNumber`，然後定義了一個函數`checkGuess()`，它會在用戶點擊按鈕時被調用。這個函數檢查輸入的有效性，如果輸入的是無效的數或者已經猜中了，它會相應地更新狀態；否則，它會比較用戶的猜測與祕密數字的大小關係，並根據情況提供反饋。
最後，我們需要確保在用戶第一次訪問頁面時就有一個初始化的提示語，因此我們在文檔加載完畢後立即執行一次`checkGuess()`函數：
window.onload = function() {
checkGuess();
};
這樣，即使用戶沒有點擊任何東西，他們也會看到一條歡迎消息。
2. 表白牆
另一個常見的前端開發者練習題目是構建一個表白牆。這通常涉及以下幾個功能：
- 允許用戶提交表白內容。
- 將所有提交的表白內容以列表的形式展示出來。
- 可能還包括點贊/踩的功能，以及對內容的審覈機制。
由於篇幅限制，這裏僅提供一個簡化的版本：
HTML結構
<!-- 省略之前的內容 -->
<form action="" method="post" id="confessionForm">
<label for="confessor">暱稱：</label>
<input type="text" name="confessor" id="confessor" placeholder="輸入您的暱稱" required>
<label for="content">表白內容：</label>
<textarea name="content" id="content" cols="30" rows="5" placeholder="寫下您想說的話" required></textarea>
<button type="submit">提交</button>
</form>
<!-- 省略後面的內容 -->
在這個例子中，我們增加了一個表單，讓用戶可以填寫他們的暱稱和表白內容。我們還使用了`required`屬性以確保字段不能爲空。
JavaScript邏輯
爲了處理表單數據，我們可以再次利用JavaScript：
var confessionListElement = document.querySelector('#confessionList');
function addConfessionToDOM(newConfession) {
// 將新的表白資訊加入至頁面中的適當位置
var newItem = document.createElement('li');
newItem.innerText = newConfession;
confessionListElement.appendChild(newItem);
}
document.getElementById('confessionForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表單預設動作
addConfessionToDOM(`【${document.getElementById('confessor').value}】 ${document.getElementById('content').value}`);
document.getElementById('confessor').value = '';
document.getElementById('content').value = '';
});
這段代碼實現了幾個關鍵點：
- 在表單提交時，我們調用了`addConfessionToDOM()`函數。
- 這個函數接受一個新的字符串參數，它是從表單元素中獲取的數據拼接而成的。
- 之後，我們清空表單以便下一個用戶進行填寫。
請注意，在實際應用中，你可能還需要考慮數據的持久化存儲，比如將數據發送到一個數據庫或者服務器上。此外，你可能會想要加上一些額外的安全措施，如防止跨站腳本攻擊（XSS）。
上述的兩個例子展示了前端開發者經常遇到的一些基礎挑戰。通過這樣的實踐，你可以鞏固你的基礎知識，提高你的編碼技巧，併爲更復雜的項目打下堅實的基礎。記住，編程是一項不斷學習的過程，每完成一個小項目都是向成功邁進的一步。祝你在編程之旅中取得圓滿成果！
