Question

我是JavaScript的新手，我正在制作一个简单的项目。基本上我有一个HTML文档，我希望每次从位于“背景”的目录中打开随机图片时更改背景图像。

function main()
{
    // Creates a list of filenames from the 'Background/' dir and gets a 
    // random index in the list
    var fs = require('fs');
    var fileList = fs.readdirSync('/Background/');
    var len = fileList.length;
    var index = Math.floor(Math.random() * len);

    var filePath = "Background/" + fileList[index];

    document.body.style.backgroundImage = "url(filePath)";
    document.body.style.backgroundSize = "cover"
}

$(document).ready(main);

无论出于何种原因，它似乎都不起作用。我无法确定URL类的确切工作方式，因为我认为它与此类有关。我没有收到任何错误。当我这样做时，我得到了背景图像以更改为特定图像：

document.body.style.backgroundImage = "url('Background/green.jpg')";

但是当我尝试随机检索文件名时。我确信这只是对语言的误解，但我似乎无法弄明白。感谢。

Answer 1

您无法在浏览器中以这种方式使用fs。您需要存储图像路径。您可以将它们存储在javascript文件中的数据库或数组中。下面以在数组中存储文件名为例。

function main()
{
    var images = ['image1.jpeg', 'image2.jpg', 'bg.png'] //storing only names
    var index = Math.floor(Math.random() * images.length)
    var filePath = "Background/" + images[index]; //creating full path
    document.body.style.background = 'url("'+filePath+'")'
    // if background-size is not changing, it's better to store it in .css file
}

$(document).ready(main);

使用JavaScript从文件名列表更改HTML文档的背景图像

1 个答案: