Question

我正在为此寻找解决方案：我希望我网站的背景每个月自动更改。是否有代码可以检查日历以从程序中存在的 12 个不同图像文件的数组中进行选择？

（一月是 image1.png，二月是 image2.png 等等...）

我相信这是一个 Javascript 解决方案，但如果有任何其他解决方案，我将不胜感激。我还没有找到可行的解决方案。

Answer 1

您可以使用内置的 Date 对象在 JavaScript 中获取当前月份。

let d = new Date();
let currentMonth = d.getMonth();
console.log(currentMonth);

然后您可以将图像的名称保存在一个数组中，并使用 currentMonth 变量中的数字访问索引


    let d = new Date();
    let currentMonth = d.getMonth();

    let imageNames = ["image1.png", "image2.png", "image3.png", "image4.png", "image5.png", "image6.png"];

    imageNames[currentMonth];

Answer 2

你可以像下面这样尝试

const imagesByMonth = [
    {
        month: 'JAN',
        image: 'jan image'
    },
    {
        month: 'FEB',
        image: 'feb image'
    },
    {
        month: 'MAR',
        image: 'mar image'
    },
    {
        month: 'APR',
        image: 'apr image'
    },
    {
        month: 'MAY',
        image: 'may image'
    },
    {
        month: 'JUN',
        image: 'june image'
    }
];

const getMonth = new Date().getMonth();

console.log('imageToDisplay', imagesByMonth[getMonth].image); // "june image"

Answer 3

DOM 内容加载后，根据 backgroundImages 获得的 0 索引月份，将背景图像设置为 (new Date()).getMonth() 数组的一个元素；

const backgroundImages = [
  "https://i.imgur.com/R8se5g1b.jpg",
  "https://i.imgur.com/1EsqT0Fb.jpg",
  "https://i.imgur.com/JXetxQhb.jpg",
  "https://i.imgur.com/s3sPQTYb.jpg",
  "https://i.imgur.com/JhLkIZHb.jpg",
  "https://i.imgur.com/zfmhZ27b.jpg",
  "https://i.imgur.com/1SSVsBHb.jpg",
  "https://i.imgur.com/8pTwPlXb.jpg",
  "https://i.imgur.com/SazaHUqb.jpg",
  "https://i.imgur.com/6VP86jlb.jpg",
  "https://i.imgur.com/BnPdUHKb.jpg",
  "https://i.imgur.com/ydi5jMhb.jpg",
];

document.addEventListener("DOMContentLoaded", () => document.body.style.backgroundImage = `url(${backgroundImages[(new Date()).getMonth()]})`)

注意：这些图片很小，所以会重复。你需要全尺寸的背景图片，你也可以用 css 改变它们的显示方式

如何根据当前日期更改图像文件？

3 个答案: