今天是第二十四天我們可以寫一個javascript自動整理筆記網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>筆記整理系統</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
#noteApp {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.note {
background-color: #f9f9f9;
margin-bottom: 10px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.note p {
margin: 0;
}
.note button {
background-color: #f44336;
}
</style>
</head>
<body>
<div id="noteApp">
<h1>筆記整理系統</h1>
<textarea id="noteInput" placeholder="輸入筆記..."></textarea>
<button onclick="addNote()">新增筆記</button>
<h2>我的筆記</h2>
<div id="notesList"></div>
</div>
<script src="app.js"></script>
</body>
</html>
// 初始載入筆記
window.onload = function() {
loadNotes();
};
// 新增筆記
function addNote() {
const noteInput = document.getElementById('noteInput');
const noteText = noteInput.value.trim();
if (noteText !== "") {
let notes = getNotesFromStorage();
notes.push(noteText);
saveNotesToStorage(notes);
noteInput.value = ""; // 清空輸入框
loadNotes();
} else {
alert("請輸入筆記內容");
}
}
// 取得 LocalStorage 中的筆記
function getNotesFromStorage() {
const notes = localStorage.getItem('notes');
return notes ? JSON.parse(notes) : [];
}
// 儲存筆記到 LocalStorage
function saveNotesToStorage(notes) {
localStorage.setItem('notes', JSON.stringify(notes));
}
// 讀取並顯示所有筆記
function loadNotes() {
const notesList = document.getElementById('notesList');
const notes = getNotesFromStorage();
notesList.innerHTML = ""; // 清空舊筆記內容
notes.forEach((note, index) => {
const noteDiv = document.createElement('div');
noteDiv.className = 'note';
const noteText = document.createElement('p');
noteText.innerText = note;
const deleteButton = document.createElement('button');
deleteButton.innerText = '刪除';
deleteButton.onclick = function() {
deleteNote(index);
};
noteDiv.appendChild(noteText);
noteDiv.appendChild(deleteButton);
notesList.appendChild(noteDiv);
});
}
// 刪除指定筆記
function deleteNote(index) {
let notes = getNotesFromStorage();
notes.splice(index, 1); // 刪除選定的筆記
saveNotesToStorage(notes);
loadNotes(); // 重新載入筆記
}
我會以講解javascript程式部分為主
window.onload = function() { loadNotes(); };)當網頁載入完成後，會自動呼叫 loadNotes() 函數。window.onload 事件確保所有 HTML 元素已被渲染完畢，這樣在訪問元素時不會出錯。
window.onload = function() {
loadNotes();
};
這段程式碼的作用是：每當網頁被打開或重新整理時，會自動從 LocalStorage 中讀取已保存的筆記，並顯示在網頁上。
addNote 函數)這個函數在使用者按下「新增筆記」按鈕時被呼叫。它會將使用者輸入的筆記內容添加到 LocalStorage。
function addNote() {
const noteInput = document.getElementById('noteInput'); // 取得輸入框元素
const noteText = noteInput.value.trim(); // 獲取使用者輸入的筆記內容並移除多餘空格
if (noteText !== "") { // 確保使用者輸入的內容不是空的
let notes = getNotesFromStorage(); // 從 LocalStorage 取得現有的筆記
notes.push(noteText); // 將新的筆記加入到筆記陣列
saveNotesToStorage(notes); // 保存更新後的筆記陣列到 LocalStorage
noteInput.value = ""; // 清空輸入框的內容
loadNotes(); // 重新載入筆記，顯示最新的筆記列表
} else {
alert("請輸入筆記內容"); // 若內容為空，提示使用者
}
}
document.getElementById('noteInput')：獲取輸入框元素，這裡是根據 ID noteInput 來取得使用者輸入的筆記。.trim()：用來去除字串兩端的空格，避免保存空白筆記。if (noteText !== "")：確保輸入框不為空，否則會顯示警告。getNotesFromStorage()：從 LocalStorage 取得所有現有的筆記。notes.push(noteText)：將新的筆記內容添加到筆記陣列中。saveNotesToStorage(notes)：將更新過的筆記存回 LocalStorage。noteInput.value = "";：清空輸入框，準備輸入下一條筆記。loadNotes()：重新加載並顯示所有筆記。getNotesFromStorage 函數)這個函數從 LocalStorage 取得保存的筆記，並將其解析為 JavaScript 陣列。
function getNotesFromStorage() {
const notes = localStorage.getItem('notes'); // 從 LocalStorage 取得存儲的筆記
return notes ? JSON.parse(notes) : []; // 如果存在筆記，則將其轉換為陣列；如果沒有，則返回空陣列
}
localStorage.getItem('notes')：從 LocalStorage 中讀取名稱為 notes 的項目，這是一個以 JSON 字串形式存儲的筆記陣列。JSON.parse(notes)：將從 LocalStorage 中取得的 JSON 字串轉換回 JavaScript 陣列。如果 notes 不存在，則返回空陣列 []。saveNotesToStorage 函數)這個函數負責將筆記保存到 LocalStorage 中。
function saveNotesToStorage(notes) {
localStorage.setItem('notes', JSON.stringify(notes)); // 將陣列轉換為 JSON 字串，並保存到 LocalStorage
}
JSON.stringify(notes)：將筆記陣列轉換為 JSON 字串，因為 LocalStorage 只能儲存字串。localStorage.setItem('notes', ...)：將轉換後的 JSON 字串存入 LocalStorage 中，項目的名稱為 notes。loadNotes 函數)這個函數會從 LocalStorage 中取得所有的筆記並將其顯示在頁面上。
function loadNotes() {
const notesList = document.getElementById('notesList'); // 取得顯示筆記列表的容器
const notes = getNotesFromStorage(); // 從 LocalStorage 取得所有筆記
notesList.innerHTML = ""; // 清空之前顯示的筆記
notes.forEach((note, index) => { // 遍歷所有筆記
const noteDiv = document.createElement('div'); // 為每條筆記創建一個容器
noteDiv.className = 'note'; // 為這個容器設定樣式
const noteText = document.createElement('p'); // 創建一個 p 元素來顯示筆記內容
noteText.innerText = note; // 設置筆記內容
const deleteButton = document.createElement('button'); // 為每條筆記創建一個刪除按鈕
deleteButton.innerText = '刪除'; // 設置按鈕文字
deleteButton.onclick = function() {
deleteNote(index); // 點擊按鈕後，呼叫 deleteNote 函數刪除該筆記
};
noteDiv.appendChild(noteText); // 將筆記文字加到筆記容器中
noteDiv.appendChild(deleteButton); // 將刪除按鈕加到筆記容器中
notesList.appendChild(noteDiv); // 將這個筆記容器加到頁面的筆記列表中
});
}
notesList.innerHTML = "";：先清空目前顯示的所有筆記，然後重新加載。notes.forEach(...)：遍歷所有筆記，為每條筆記創建對應的 DOM 元素，並將其顯示在頁面上。noteDiv.appendChild(noteText)：將筆記內容放入筆記的容器中。deleteButton.onclick = function() {...}：為每個筆記添加刪除功能，按下按鈕即可刪除對應筆記。deleteNote 函數)這個函數刪除指定的筆記，並重新加載筆記列表。
function deleteNote(index) {
let notes = getNotesFromStorage(); // 從 LocalStorage 取得所有筆記
notes.splice(index, 1); // 刪除對應的筆記，splice(位置, 刪除數量)
saveNotesToStorage(notes); // 保存刪除後的筆記列表到 LocalStorage
loadNotes(); // 重新加載筆記列表
}
notes.splice(index, 1)：從筆記陣列中刪除對應索引（index）的筆記。saveNotesToStorage(notes)：將更新後的筆記陣列存回 LocalStorage。loadNotes()：重新加載並顯示筆記，刪除操作後的列表會即時更新。
iThome鐵人賽
看影片追技術