按钮点击后设Cookie并变红10分钟，超时后无法恢复正常求助

看起来你遇到的核心问题是前端定时器在页面刷新/跳转后失效，导致没法在10分钟后自动恢复按钮样式。毕竟定时器是绑定在当前页面的，一旦用户刷新页面或者跳转到首页，之前的定时器就消失了，自然不会触发恢复逻辑。另外，可能你也没在页面加载时检查Cookie状态，导致刷新后按钮一直是红色但没有后续的恢复机制。

下面给你一套兼顾页面持久化状态和定时器恢复的完整解决方案：

1. 先封装Cookie操作工具函数（复用性更强） #

这些函数帮你轻松设置、读取和删除全站可用的Cookie：

// 设置Cookie，支持过期分钟数，path=/确保全站可访问
function setCookie(name, value, minutes) {
  const date = new Date();
  date.setTime(date.getTime() + (minutes * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = `${name}=${value};${expires};path=/`;
}

// 获取指定名称的Cookie值
function getCookie(name) {
  const nameEQ = `${name}=`;
  const cookieArr = document.cookie.split(';');
  for(let cookie of cookieArr) {
    cookie = cookie.trim();
    if (cookie.startsWith(nameEQ)) {
      return cookie.substring(nameEQ.length);
    }
  }
  return null;
}

// 删除指定Cookie
function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

2. 完整的交互逻辑（包含点击处理+页面加载恢复） #

这段代码会处理点击#quest1的逻辑，同时在页面加载时检查Cookie状态，确保刷新/跳转后依然能正确计时恢复：

$(document).ready(function() {
  // 全局变量存储定时器ID，方便重复点击时清除旧定时器
  let playNowRestoreTimer = null;

  // 处理#quest1按钮点击事件
  $('#quest1').on('click', function() {
    // 先清除之前的定时器（如果有的话）
    if (playNowRestoreTimer) {
      clearTimeout(playNowRestoreTimer);
    }

    // 设置10分钟过期的Cookie
    setCookie('playNowBtnRed', 'active', 10);
    // 立即给PlayNow按钮添加红色样式
    $('.PlayNow').addClass('btn-red');

    // 设置新的10分钟定时器，到期后恢复样式并清除Cookie
    playNowRestoreTimer = setTimeout(function() {
      $('.PlayNow').removeClass('btn-red');
      deleteCookie('playNowBtnRed');
      playNowRestoreTimer = null;
    }, 10 * 60 * 1000); // 10分钟 = 600秒 = 600000毫秒
  });

  // 页面加载时检查Cookie，恢复按钮状态和剩余计时
  const isBtnRed = getCookie('playNowBtnRed');
  if (isBtnRed) {
    $('.PlayNow').addClass('btn-red');

    // 计算Cookie剩余过期时间，设置对应的定时器
    const cookieStr = document.cookie.split(';').find(item => item.trim().startsWith('playNowBtnRed='));
    if (cookieStr) {
      const expiresStr = cookieStr.split('expires=')[1];
      const expiresTime = new Date(expiresStr).getTime();
      const remainingTime = expiresTime - new Date().getTime();

      if (remainingTime > 0) {
        playNowRestoreTimer = setTimeout(function() {
          $('.PlayNow').removeClass('btn-red');
          deleteCookie('playNowBtnRed');
          playNowRestoreTimer = null;
        }, remainingTime);
      } else {
        // Cookie已经过期，直接恢复样式
        $('.PlayNow').removeClass('btn-red');
        deleteCookie('playNowBtnRed');
      }
    }
  }
});

3. 确保样式优先级足够 #

给红色样式设置足够高的权重，避免被原按钮样式覆盖：

/* 替换成你实际的红色样式，这里用!important确保优先级（如果原样式权重高的话） */
.PlayNow.btn-red {
  background-color: #ff0000 !important;
  color: #ffffff;
  /* 其他你需要的红色样式 */
}

关键修复点说明 #

1. Cookie全站可用：设置path=/，这样首页和/game页都能读取到这个Cookie，确保页面跳转后状态一致
2. 页面加载时恢复状态：每次页面加载都会检查Cookie，如果按钮应该是红色的，会立即添加样式，并根据Cookie剩余过期时间设置定时器
3. 重复点击处理：如果用户在10分钟内再次点击#quest1，会先清除旧的定时器，重新开始计时，避免多个定时器冲突
4. Cookie自动过期兜底：即使定时器因为某种原因失效，Cookie也会在10分钟后自动过期，下次页面加载时会恢复样式

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