网站开发需求：如何实现带文本展示的每周计数器？

完全可以用JavaScript实现这个需求，核心思路是根据当前日期计算一年中的周数，再匹配预先定义好的每周文本内容。以下是完整的实现示例：

1. 定义每周对应文本 #

先准备好52周的内容数组，索引对应周数（周数从1开始，数组索引从0，所以周1对应索引0，以此类推）：

const weeklyTexts = [
  "Week1 - 阿尔及利亚",
  "Week2 - 南非",
  // 补充Week3到Week51的对应内容
  "Week52 - [对应国家]"
];

2. 计算当前年份的周数 #

下面的函数返回当前日期所在的ISO周数（ISO周以周一为一周的开始，每年最多52周）：

function getCurrentWeekNumber() {
  const date = new Date();
  const startOfYear = new Date(date.getFullYear(), 0, 1);
  const daysOffset = (date.getDay() + 6) % 7; // 调整为周一作为周起始
  const dayOfYear = Math.floor((date - startOfYear) / (1000 * 60 * 60 * 24)) + 1;
  return Math.ceil((dayOfYear - daysOffset) / 7);
}

如果需要以周日为周起始，修改daysOffset的计算方式即可：

const daysOffset = date.getDay(); // 周日为0，周六为6

3. 渲染对应文本到页面 #

在HTML中添加一个容器用于显示内容：

<div id="weeklyCounter"></div>

再用JavaScript获取周数并渲染：

const counterElement = document.getElementById('weeklyCounter');
let currentWeek = getCurrentWeekNumber();

// 确保周数在1-52范围内，超出则显示默认内容
if (currentWeek >= 1 && currentWeek <= 52) {
  counterElement.textContent = weeklyTexts[currentWeek - 1];
} else {
  counterElement.textContent = "当前周数超出范围";
}

额外优化 #

如果需要每周自动更新（无需用户刷新页面），可以定时检查日期变化：

setInterval(() => {
  const newWeek = getCurrentWeekNumber();
  if (newWeek !== currentWeek) {
    currentWeek = newWeek;
    counterElement.textContent = weeklyTexts[currentWeek - 1];
  }
}, 1000 * 60 * 60); // 每小时检查一次

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