基于HTML/CSS/原生JS的待办清单：排序与提醒功能求助

一、任务排序功能 #

1. 完善任务结构与通用排序函数 #

首先确保每个任务对象包含createdDate（添加日期）、dueDate（截止日期）、completed（完成状态）字段，新增任务时要存入这些信息：

// 生成带日期字段的任务对象
function createTask(text, category, dueDate) {
  return {
    id: Date.now().toString(),
    text,
    completed: false,
    category,
    createdDate: new Date().toISOString(), // 存储标准ISO格式日期
    dueDate: dueDate ? new Date(dueDate).toISOString() : null
  };
}

编写通用排序函数，支持多维度排序规则：

// 根据指定规则排序任务（不修改原数组）
function sortTasks(tasks, sortType) {
  return [...tasks].sort((taskA, taskB) => {
    switch (sortType) {
      // 按添加日期降序（最新任务在前），反转a/b可改为升序
      case 'createdDate':
        return new Date(taskB.createdDate) - new Date(taskA.createdDate);
      // 按截止日期升序（最早到期的在前，无截止日期的排最后）
      case 'dueDate':
        if (!taskA.dueDate) return 1;
        if (!taskB.dueDate) return -1;
        return new Date(taskA.dueDate) - new Date(taskB.dueDate);
      // 按完成状态排序（未完成在前，完成在后）
      case 'completed':
        return taskA.completed - taskB.completed;
      default:
        return 0;
    }
  });
}

2. 绑定UI触发排序 #

在页面添加排序选择控件，绑定事件触发排序并更新页面：

<!-- 新增排序选择器 -->
<div class="sort-bar">
  <label>排序方式：</label>
  <select id="taskSort">
    <option value="createdDate">按添加日期</option>
    <option value="dueDate">按截止日期</option>
    <option value="completed">按完成状态</option>
  </select>
</div>

// 绑定排序选择事件
document.getElementById('taskSort').addEventListener('change', (e) => {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  const sortedTasks = sortTasks(tasks, e.target.value);
  // 调用你已有的任务列表渲染函数更新页面
  renderTaskList(sortedTasks);
  // 可选：若需持久化排序后的顺序，取消下面注释
  // localStorage.setItem('tasks', JSON.stringify(sortedTasks));
});

二、任务提醒功能 #

使用浏览器原生Notification API实现提醒，步骤如下：

1. 请求通知权限 #

// 页面加载时请求通知权限
async function initNotificationPermission() {
  if (!('Notification' in window)) {
    alert('当前浏览器不支持通知功能');
    return;
  }
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    alert('请开启通知权限以使用提醒功能');
  }
}

// 页面初始化时调用
window.addEventListener('load', initNotificationPermission);

2. 实现提醒逻辑 #

支持两种触发方式：定时检查到期任务，或新增任务时直接设置定时器：

// 显示任务提醒通知
function showTaskNotification(task) {
  if (Notification.permission !== 'granted') return;
  new Notification('待办任务提醒', {
    body: `任务「${task.text}」即将到期！`,
    // 可选：替换为你的通知图标路径
    // icon: './assets/remind-icon.png'
  });
}

// 定时检查即将到期的任务（每分钟检查一次）
function checkDueTasks() {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  const now = new Date();
  // 筛选未来10分钟内到期的未完成任务
  const dueSoonTasks = tasks.filter(task => {
    if (task.completed || !task.dueDate) return false;
    const dueDate = new Date(task.dueDate);
    const timeUntilDue = dueDate - now;
    return timeUntilDue > 0 && timeUntilDue <= 10 * 60 * 1000;
  });

  dueSoonTasks.forEach(showTaskNotification);
}

// 启动定时检查
setInterval(checkDueTasks, 60 * 1000);

// 新增任务时直接设置到期提醒（若有截止日期）
function addNewTask(task) {
  // 你的原有新增逻辑：存入localStorage、渲染页面
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
  renderTaskList(tasks);

  // 设置到期提醒定时器
  if (task.dueDate) {
    const dueDate = new Date(task.dueDate);
    const now = new Date();
    const timeDiff = dueDate - now;
    if (timeDiff > 0) {
      setTimeout(() => showTaskNotification(task), timeDiff);
    }
  }
}

注意事项 #

• Notification API在生产环境需要HTTPS协议，本地localhost可正常使用；
• 确保任务的日期字段为标准ISO格式（toISOString()生成），避免日期解析错误；
• 若用户关闭浏览器，定时检查会停止，下次打开页面会重新启动检查。

内容的提问来源于stack exchange，提问作者AlexTryJs