今日工作待办事项工具 - 在线网页版 - 常规

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>今日工作待办事项工具</title>
  <style>
    .todo-item {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>今日工作待办事项工具</h1>
  <div>
    <h2>待办事项列表</h2>
    <div id='todo-list'></div>
    <p id='no-todo-message'>无待办情况</p>
  </div>
  <div>
    <h2>状态栏展示</h2>
    <p>待办事项个数：<span id='item-count'></span><span id='unit'></span></p>
  </div>
  <div>
    <h2>事项新增</h2>
    <input type='text' id='add-input' placeholder='输入待办事项内容，按Enter添加'>
  </div>
  <div>
    <h2>事项筛选</h2>
    <select id='filter-select'>
      <option value='all'>全部</option>
      <option value='completed'>已完成</option>
      <option value='uncompleted'>未完成</option>
    </select>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取DOM元素
      const todoList = document.getElementById('todo-list');
      const noTodoMessage = document.getElementById('no-todo-message');
      const itemCount = document.getElementById('item-count');
      const unit = document.getElementById('unit');
      const addInput = document.getElementById('add-input');
      const filterSelect = document.getElementById('filter-select');

      // 待办事项列表
      let todos = [];

      // 更新待办事项列表的显示
      function updateTodoList() {
        todoList.innerHTML = ''; // 清空列表

        todos.forEach((todo, index) => {
          const todoItem = document.createElement('div');
          todoItem.classList.add('todo-item');

          const checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.checked = todo.completed;
          checkbox.addEventListener('change', () => {
            toggleTodoStatus(index);
          });

          const text = document.createElement('span');
          text.textContent = todo.content;

          todoItem.appendChild(checkbox);
          todoItem.appendChild(text);

          todoList.appendChild(todoItem);
        });
      }

      // 更新状态栏展示
      function updateStatusbar() {
        if (todos.length === 0) {
          noTodoMessage.style.display = 'block';
          itemCount.textContent = '';
          unit.textContent = '';
        } else {
          noTodoMessage.style.display = 'none';
          itemCount.textContent = todos.length;
          unit.textContent = todos.length > 1 ? '项' : '个';
        }
      }

      // 切换事项状态
      function toggleTodoStatus(index) {
        todos[index].completed = !todos[index].completed;
        updateStatusbar();
      }

      // 添加新的待办事项
      function addTodoItem(content) {
        todos.push({ content, completed: false });
        updateTodoList();
        updateStatusbar();
      }

      // 监听新增待办事项
      addInput.addEventListener('keydown', event => {
        if (event.key === 'Enter') {
          const content = addInput.value.trim();
          if (content !== '') {
            addTodoItem(content);
            addInput.value = '';
          }
        }
      });

      // 监听筛选条件改变
      filterSelect.addEventListener('change', () => {
        const type = filterSelect.value;
        if (type === 'completed') {
          const completedTodos = todos.filter(todo => todo.completed);
          todoList.innerHTML = '';
          completedTodos.forEach((todo, index) => {
            const todoItem = document.createElement('div');
            todoItem.textContent = todo.content;
            todoList.appendChild(todoItem);
          });
        } else if (type === 'uncompleted') {
          const uncompletedTodos = todos.filter(todo => !todo.completed);
          todoList.innerHTML = '';
          uncompletedTodos.forEach((todo, index) => {
            const todoItem = document.createElement('div');
            todoItem.textContent = todo.content;
            todoList.appendChild(todoItem);
          });
        } else {
          updateTodoList();
        }
      });
    });
  </script>
</body>
</html>