<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #f6f6f6;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
color: #8e9bf0;
}
.todo-form {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.todo-input {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.todo-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #8e9bf0;
color: #fff;
cursor: pointer;
}
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
background-color: #e8e8e8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.todo-item:last-child {
margin-bottom: 0;
}
.todo-item-checkbox {
margin-right: 10px;
}
.todo-item-text {
flex: 1;
color: #818491;
font-weight: bold;
}
.todo-item-delete {
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #ff6b6b;
color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
.todo-item-delete:hover {
background-color: #ff4f4f;
}
.buttons {
display: flex; /* 使用弹性布局 */
justify-content: space-between; /* 将按钮平均分布在容器内 */
margin-top: 10px; /* 根据需要设置顶部间距 */
}
.buttons button {
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
/* 撤销所有样式,只保留内边距和指针样式 */
background-color: #fff;
border: none;
outline: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="header">My Dos</h1>
<form class="todo-form" id="todoForm">
<input
type="text"
class="todo-input"
placeholder="i do ..."
id="todoInput"
/>
<button type="submit" class="todo-button">Add</button>
</form>
</div>
<div class="container">
<ul class="todo-list" id="todoList"></ul>
<div class="buttons">
<button onclick="selectAll()">selected all</button>
<button><span id="notCompletedCount">0</span> not finish</button>
<button onclick="deleteSelected()">Delete selected</button>
</div>
</div>
<script>
const todoForm = document.getElementById("todoForm");
const todoList = document.getElementById("todoList");
const todoInput = document.getElementById("todoInput");
const notCompletedCount = document.getElementById("notCompletedCount");
function createToDoItem(text) {
const li = document.createElement("li");
li.className = "todo-item";
li.innerHTML = `
<input type="checkbox" class="todo-item-checkbox">
<span class="todo-item-text">${text}</span>
<button class="todo-item-delete">Delete</button>
`;
countNotCompleted();
return li;
}
// 在任务列表每次变化时,也需要调用更新函数
todoForm.onsubmit = function (event) {
event.preventDefault();
const todoText = todoInput.value.trim();
if (!todoText) return;
const li = createToDoItem(todoText);
todoList.appendChild(li);
todoInput.value = "";
// 新增任务后更新未完成任务数量
countNotCompleted();
};
function selectAll() {
const checkboxes = todoList.querySelectorAll(".todo-item-checkbox");
checkboxes.forEach((checkbox) => {
checkbox.checked = true;
});
// 调用函数计算未完成任务数量
countNotCompleted();
}
//计算未完成任务数量
function countNotCompleted() {
const todoItems = document.querySelectorAll(".todo-item");
let notCompleted = 0;
todoItems.forEach((item) => {
const checkbox = item.querySelector(".todo-item-checkbox");
if (!checkbox.checked) {
notCompleted++;
}
});
// 更新页面上的显示数量
notCompletedCount.textContent = notCompleted;
}
//选择的选项删除
function deleteSelected() {
const items = todoList.querySelectorAll(".todo-item");
items.forEach((item) => {
const checkbox = item.querySelector(".todo-item-checkbox");
if (checkbox.checked) {
item.remove();
}
});
}
todoList.onclick = function (event) {
countNotCompleted();
if (
event.target.className === "todo-item-delete" &&
confirm("你确定要删除它吗?")
) {
event.target.parentNode.remove();
}
countNotCompleted();
};
</script>
</body>
</html>
html 一个简单的待办事项(To-Do List)网页应用。它允许用户添加、查看、标记完成和删除待办事项。
于 2024-07-18 09:03:57 首次发布