轻松实现JavaScript七天签到功能：您的签到，由我守护！

2023-09-08 12:31:49

正文

在当今数字时代，签到功能早已成为许多应用程序和网站的重要组成部分。无论是每日打卡、活动参与还是任务完成，签到功能都能帮助我们追踪进度并获得奖励。今天，我们就将使用JavaScript来实现一个实用的七天签到功能，让您轻松记录和管理您的日常签到，并提供激活状态提示。

签到功能实现思路

准备一个数组来存储签到日期。
当用户点击签到按钮时，我们首先检查数组中是否已经存在当天日期。
- 如果存在，则表示用户已签到，我们直接使用存入的数组判断激活状态即可。
- 如果不存在，则说明用户尚未签到，我们需要根据以下两种情况分别处理：
  - 没有签到记录（空数组）：直接将当天日期添加到数组中，并激活签到状态。
  - 有签到记录（非空数组）：我们需要判断上次签到日期是否在七天之内。如果在七天之内，则直接将当天日期添加到数组中，并激活签到状态；如果不在七天之内，则清空数组，将当天日期添加到数组中，并激活签到状态。

实现代码

// 创建一个空数组来存储签到日期
let签到日期 = [];

// 当用户点击签到按钮时执行此函数
const签到 = () => {
  // 获取当前日期
  const today = new Date();

  // 将当前日期转换为字符串格式
  const todayStr = today.toLocaleDateString();

  // 检查数组中是否已经存在当天日期
  if (签到日期.includes(todayStr)) {
    // 如果存在，则表示用户已签到，直接使用存入的数组判断激活状态即可
    console.log("您已于" + todayStr + "签到过，无法重复签到。");
  } else {
    // 如果不存在，则说明用户尚未签到，我们需要根据以下两种情况分别处理
    if (签到日期.length === 0) {
      // 如果没有签到记录（空数组），则直接将当天日期添加到数组中，并激活签到状态
      签到日期.push(todayStr);
      console.log("签到成功！您已连续签到1天。");
    } else {
      // 如果有签到记录（非空数组），我们需要判断上次签到日期是否在七天之内
      const last签到日期 = 签到日期[签到日期.length - 1];
      const last签到日期Obj = new Date(last签到日期);
      const diffTime = today - last签到日期Obj;
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

      if (diffDays <= 7) {
        // 如果在七天之内，则直接将当天日期添加到数组中，并激活签到状态
        签到日期.push(todayStr);
        console.log("签到成功！您已连续签到" + (签到日期.length) + "天。");
      } else {
        // 如果不在七天之内，则清空数组，将当天日期添加到数组中，并激活签到状态
        签到日期 = [];
        签到日期.push(todayStr);
        console.log("签到成功！您已重新开始签到，目前已连续签到1天。");
      }
    }
  }
};