html 一个简单的待办事项（To-Do List）网页应用。它允许用户添加、查看、标记完成和删除待办事项。

学前端的坤坤bond

已于 2024-07-18 09:04:27 修改

阅读量237

点赞数 1

文章标签： html list css 前端 html5 javascript es6

于 2024-07-18 09:03:57 首次发布

本文链接：https://blog.csdn.net/m0_64904350/article/details/140512519

版权

<!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>&nbsp;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>

学前端的坤坤bond

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 一个简单的待办事项（To-Do List）网页应用。它允许用户添加、查看、标记完成和删除待办事项。

【代码】html 一个简单的待办事项（To-Do List）网页应用。它允许用户添加、查看、标记完成和删除待办事项。
复制链接

扫一扫