JavaScript网页设计案例
以下是一个使用 JavaScript 进行网页设计的简单案例：
一、案例介绍
这个案例是一个简单的待办事项列表应用。用户可以在输入框中输入待办事项，点击“添加”按钮将其添加到列表中。每个待办事项旁边有一个“完成”按钮和一个“删除”按钮，用户可以点击“完成”按钮将待办事项标记为已完成，点击“删除”按钮将其从列表中删除。
二、HTML 结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项列表</title><link rel="stylesheet" href="styles.css">
</head><body><h1>待办事项列表</h1><input type="text" id="todoInput" placeholder="输入待办事项"><button id="addButton">添加</button><ul id="todoList"></ul><script src="script.js"></script>
</body></html>
三、CSS 样式（styles.css）
body {font-family: Arial, sans-serif;background-color: #f4f4f4;
}h1 {text-align: center;
}input[type="text"] {padding: 10px;width: 300px;font-size: 16px;
}button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;cursor: pointer;
}ul {list-style-type: none;padding: 0;
}li {background-color: #fff;padding: 10px;margin: 10px 0;border: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;
}button.completeButton {background-color: #2196F3;
}button.deleteButton {background-color: #f44336;
}
四、JavaScript 功能实现（script.js）
// 获取 DOM 元素
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');// 添加待办事项
addButton.addEventListener('click', () => {const todoText = todoInput.value.trim();if (todoText!== '') {const li = document.createElement('li');li.textContent = todoText;const completeButton = document.createElement('button');completeButton.textContent = '完成';completeButton.classList.add('completeButton');completeButton.addEventListener('click', () => {li.classList.toggle('completed');});const deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.classList.add('deleteButton');deleteButton.addEventListener('click', () => {todoList.removeChild(li);});li.appendChild(completeButton);li.appendChild(deleteButton);todoList.appendChild(li);todoInput.value = '';}
});
在这个案例中，我们使用了 HTML、CSS 和 JavaScript 来创建一个简单的待办事项列表应用。通过 JavaScript，我们实现了添加待办事项、标记为完成和删除待办事项的功能。你可以根据自己的需求进一步扩展和改进这个应用，例如添加本地存储功能，以便在页面刷新后仍然保留待办事项列表。