当前位置：首页 > news >正文

JavaScript网页设计案例

news 2025/8/6 8:30:55

以下是一个使用 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 = '';}
});