如何使用JavaScript在指定星期几显示对应特定图片？

核心依赖JS原生Date对象获取当日星期，做简单的索引匹配后即可从你已有的资源函数中取出对应图片渲染到页面，需要注意原生getDay()方法的返回值规则：

Date.prototype.getDay()返回0~6的整数，其中0代表周日、1代表周一、6代表周六，和日常「周一为一周第一天」的计数差1，需要做简单偏移处理。

具体实现步骤 #

• 整理图片资源映射
  不管你现有存储图片的函数是返回数组、还是传参返回单张图片，只要保证图片顺序和周一到周日一一对应即可，举个最常见的资源函数示例：

  // 你已有的图片资源函数，按顺序存储周一到周日的图片地址
  function getWeekImageList() {
    return [
      './images/image1.jpg', // 索引0 对应周一
      './images/image2.jpg', // 索引1 对应周二
      './images/image3.jpg', // 索引2 对应周三
      './images/image4.jpg', // 索引3 对应周四
      './images/image5.jpg', // 索引4 对应周五
      './images/image6.jpg', // 索引5 对应周六
      './images/image7.jpg'  // 索引6 对应周日
    ]
  }
  

• 编写当日图片获取逻辑
  处理星期值的偏移，从资源函数中取出对应图片：

  function getTodayShowImage() {
    const currentDay = new Date().getDay()
    // 计算图片索引：周一(返回1)对应索引0，周日(返回0)对应索引6
    const targetIndex = currentDay === 0 ? 6 : currentDay - 1
    const allImages = getWeekImageList()
    return allImages[targetIndex]
  }
  

  如果你的现有资源函数是通过传入星期数字（1=周一，7=周日）取图，不需要数组索引，直接调整计算逻辑即可：

  // 你的现有取图函数示例
  function getImageByWeekNum(weekNum) {
    // 原有取图逻辑
  }
  // 计算传入的星期参数
  const weekNum = currentDay === 0 ? 7 : currentDay
  const todayImg = getImageByWeekNum(weekNum)
  

• 渲染图片到页面
  先在页面HTML中预留图片展示标签：

  <img id="dailyBanner" alt="当日展示图片" />
  

  等页面DOM加载完成后，把取到的图片地址赋值给img标签的src属性即可完成展示：

  document.addEventListener('DOMContentLoaded', () => {
    const imgElement = document.getElementById('dailyBanner')
    imgElement.src = getTodayShowImage()
  })
  

调试技巧 #

如果需要验证不同星期的展示效果，可以临时固定currentDay的取值，比如写死const currentDay = 3就能看到周三的展示效果，验证完成后改回动态获取的逻辑即可。

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