如何实现Wordle克隆版每日定时换词而非刷新时换词

首先说你之前用setInterval(initBoard(), 3600000*24)没用的原因：你直接调用了initBoard()，而不是把函数本身传给setInterval。这样代码会立即执行一次initBoard()，然后setInterval拿到的是函数的返回值（undefined），等于没设置定时器。就算改成setInterval(initBoard, 86400000)也不合适，因为固定24小时间隔会导致时间偏移（比如你中午打开页面，24小时后是第二天中午，不是午夜换词）。

要实现每日固定单词、刷新不变、午夜自动更新的功能，核心是根据日期生成唯一固定的单词索引，再配合精准的午夜定时器，具体步骤如下：

1. 根据日期生成当日固定单词 #

我们可以把当天的日期转成唯一字符串，再通过哈希计算得到一个数值，用这个数值对单词数组长度取模，就能得到当天固定的单词索引——同一天计算出来的索引完全一致，刷新页面也不会变，第二天日期变了索引才会更新。

示例代码：

// 你的单词数组，替换成自己的列表
const wordList = ["APPLE", "BANANA", "CHERRY", "DATE", "ELDERBERRY"];

function getDailyWord() {
  // 生成YYYY-MM-DD格式的日期字符串，确保同一天的字符串完全相同
  const today = new Date();
  const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

  // 将日期字符串转成哈希值（简单实现）
  let hash = 0;
  for (let i = 0; i < dateStr.length; i++) {
    hash = ((hash << 5) - hash) + dateStr.charCodeAt(i);
    hash |= 0; // 转为32位整数避免溢出
  }

  // 计算非负索引，确保在单词数组范围内
  const index = Math.abs(hash) % wordList.length;
  return wordList[index];
}

// 初始化当日目标单词
let rightGuessString = getDailyWord();

2. 初始化棋盘（修正你的代码） #

你的initBoard函数本身没问题，但要确保它使用的rightGuessString是上面生成的当日固定单词：

// 假设你已经定义了NUMBER_OF_GUESSES，比如6
const NUMBER_OF_GUESSES = 6;

function initBoard() {
  const board = document.getElementById("game-board");
  // 先清空棋盘，避免重复初始化
  board.innerHTML = "";

  for (let i = 0; i < NUMBER_OF_GUESSES; i++) {
    const row = document.createElement("div");
    row.className = "letter-row";
    
    for (let j = 0; j < rightGuessString.length; j++) {
      const box = document.createElement("div");
      box.className = "letter-box";
      row.appendChild(box);
    }

    board.appendChild(row);
  }
}

// 页面加载时初始化棋盘
window.addEventListener("load", initBoard);

3. 实现午夜自动更新单词 #

要精准在午夜切换单词，需要计算当前时间到下一个午夜的毫秒数，用setTimeout触发更新，更新后再重新调度第二天的定时器：

function calculateTimeToMidnight() {
  const now = new Date();
  // 下一个午夜的时间（今天的日期+1天，时分秒设为0）
  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
  return midnight.getTime() - now.getTime();
}

function scheduleMidnightUpdate() {
  const timeLeft = calculateTimeToMidnight();
  setTimeout(() => {
    // 更新当日单词
    rightGuessString = getDailyWord();
    // 重置棋盘
    initBoard();
    // 继续调度下一天的午夜更新
    scheduleMidnightUpdate();
  }, timeLeft);
}

// 页面加载时启动调度
window.addEventListener("load", scheduleMidnightUpdate);

关键注意点 #

• 不要用setInterval固定24小时间隔：如果用户页面连续打开超过24小时，固定间隔会导致换词时间逐渐偏离午夜，用计算到午夜的延迟更精准。
• 日期格式化要统一：必须保证同一天的日期字符串完全相同，比如月份和日期要补前导零（比如09而不是9），否则不同格式会导致哈希值不同，单词不一致。

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