以下是一个使用 JavaScript 进行网页设计的简单案例:
一、案例介绍
这个案例是一个简单的待办事项列表应用。用户可以在输入框中输入待办事项,点击"添加"按钮将其添加到列表中。每个待办事项旁边有一个"完成"按钮和一个"删除"按钮,用户可以点击"完成"按钮将待办事项标记为已完成,点击"删除"按钮将其从列表中删除。
二、HTML 结构
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)
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)
javascript
// 获取 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,我们实现了添加待办事项、标记为完成和删除待办事项的功能。你可以根据自己的需求进一步扩展和改进这个应用,例如添加本地存储功能,以便在页面刷新后仍然保留待办事项列表。