帮我用html,css,js写一个待办事项页面
时间: 2023-12-17 09:04:48 浏览: 34
好的,以下是一个简单的待办事项页面的HTML、CSS、JS代码:
HTML代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>待办事项</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>待办事项</h1>
<div class="input-container">
<input type="text" id="input" placeholder="请输入待办事项">
<button id="add">添加</button>
</div>
<ul id="list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
.input-container {
display: flex;
}
#input {
flex: 1;
padding: 10px;
margin-right: 10px;
}
#add {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
#add:hover {
background-color: #3e8e41;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.check {
margin-right: 10px;
}
.delete {
background-color: #f44336;
color: white;
border: none;
padding: 5px;
cursor: pointer;
}
.delete:hover {
background-color: #da190b;
}
```
JS代码:
```
const input = document.getElementById('input');
const addBtn = document.getElementById('add');
const list = document.getElementById('list');
addBtn.addEventListener('click', () => {
const text = input.value.trim();
if (text) {
const item = document.createElement('li');
item.innerHTML = `
<input type="checkbox" class="check">
<span>${text}</span>
<button class="delete">删除</button>
`;
list.appendChild(item);
input.value = '';
}
});
list.addEventListener('click', (event) => {
if (event.target.classList.contains('check')) {
const item = event.target.parentElement;
if (event.target.checked) {
item.classList.add('checked');
} else {
item.classList.remove('checked');
}
} else if (event.target.classList.contains('delete')) {
const item = event.target.parentElement;
list.removeChild(item);
}
});
```
这个页面有一个输入框和一个“添加”按钮,当用户输入文本并点击“添加”按钮时,页面会添加一个待办事项。每个待办事项包括一个复选框、一个文本和一个“删除”按钮。当用户勾选待办事项的复选框时,该待办事项会被标记为已完成;当用户点击待办事项的“删除”按钮时,该待办事项会被删除。