Question

这是一个真正的'noob'问题，但我正在努力使用javascript。我想要在一周中的每一天更改背景图像。我想我已经正确实现了日期功能。我有一个完整的URL，用于放置在一个数组中的7个图像。我有一个通过身体按钮工作的功能。我想我调用数组元素是错误的，将它们传递给changeImage函数。如果我用完整的URL替换数组引用（piclnk [wkdy]），它可以工作。当然，我希望它每天都能改变。可能是一个简单的答案，但我还没有找到它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<head>
<script type="text/javascript">

function changeImage(newImage)
{
 elem = document.getElementById("mainpage");
 elem.style.backgroundImage = newImage;
}
</script>

</head>
<body id="mainpage" style="background-color:aqua">
<script type="text/javascript">
var piclnk = new Array();
var now = new Date();
var wkdy = now.getDay();
piclnk[0]='http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-  3Mp7SqD/0/X3/Moms-Visit-Beach-Busch14-X3.jpg';
piclnk[1]='http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-NpbsQVZ/0/X3/Moms-Visit-Phillies02-X3.jpg';
piclnk[2]='http://johndoc1.smugmug.com/2011Pictures/Beach/Brian-rests-a-shore-house/i-KtdDb9z/0/X3/Brian-beach-Frescos-007-X3.jpg';
piclnk[3]='http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-6FBTfLn/0/X3/Moms-Visit-Ed-Frescos03-X3.jpg';
piclnk[4]='http://johndoc1.smugmug.com/2011Pictures/Events/John-Cecilia-Wedding-Day/i-2D44Xrj/0/X3/John-and-Cecilia-wedding-068-X3.jpg';
piclnk[5]='https://sphotos-a.xx.fbcdn.net/hphotos-snc6/248107_3426722028174_1990858472_n.jpg';
piclnk[6]='http://johndoc1.smugmug.com/2002-pictures/Birthdays/Eileens-40th-at-Hershey/mom-michael-pippi/226530953_ULboq-X3.jpg';
var lnk = document.createElement('link');
lnk.type='text/css';
lnk.href=piclnk[wkdy];
lnk.rel='stylesheet';
changeImage('url(piclnk[wkdy])');
</script>
<button onclick="changeImage('url(http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-DNLjwPs/0/XL/Moms%20Visit%20Porch%2002-XL.jpg)')">Mom Celeste Julia</button><br>
<button onclick="changeImage('url(http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-sd3Cp9b/0/XL/Moms%20Visit%20Ed%20Frescos06-XL.jpg)')">Woltemates</button><br>
<button onclick="changeImage('url(http://johndoc1.smugmug.com/2011Pictures/Events/John-Cecilia-Wedding-Day/i-2D44Xrj/0/X3/John-and-Cecilia-wedding-068-X3.jpg)')">Eileen / Hilda</button><br>
</body>
</html>

Answer 1

您正在将文本'url(piclnk[wkdy])'传递给changeImage()函数 - 按以下方式更改它，它应该开始工作：

changeImage('url(' + piclnk[wkdy] + ')');

另外，您知道，构建阵列的更好方法是：

var piclnk = [
    'http://first/image.jpg',
    'http://second/image.jpg',
    'etc'
];

Answer 2

我可以建议在更改功能中添加url字符串吗？就这样：

function changeImage(newImage) {
    document.getElementById('mainpage').style.backgroundImage = 'url(' + newImage + ')';
}

现在你可以使用：

changeImage(piclnk[wkdy]);

或者：

<button onclick="changeImage('http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-DNLjwPs/0/XL/Moms%20Visit%20Porch%2002-XL.jpg')">Mom Celeste Julia</button><br>

无需每次都添加url字符串。

修改

当美化代码时，它可能如此：

function changeImage(newImage) { document.getElementById('mainpage').style.backgroundImage = 'url(' + newImage + ')'; } var picUrls = [ 'http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-3Mp7SqD/0/X3/Moms-Visit-Beach-Busch14-X3.jpg', 'http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-NpbsQVZ/0/X3/Moms-Visit-Phillies02-X3.jpg', 'http://johndoc1.smugmug.com/2011Pictures/Beach/Brian-rests-a-shore-house/i-KtdDb9z/0/X3/Brian-beach-Frescos-007-X3.jpg', 'http://johndoc1.smugmug.com/2012Pictures/Beach/Mom-and-Brian-Visit-Avalon/i-6FBTfLn/0/X3/Moms-Visit-Ed-Frescos03-X3.jpg', 'http://johndoc1.smugmug.com/2011Pictures/Events/John-Cecilia-Wedding-Day/i-2D44Xrj/0/X3/John-and-Cecilia-wedding-068-X3.jpg', 'https://sphotos-a.xx.fbcdn.net/hphotos-snc6/248107_3426722028174_1990858472_n.jpg', 'http://johndoc1.smugmug.com/2002-pictures/Birthdays/Eileens-40th-at-Hershey/mom-michael-pippi/226530953_ULboq-X3.jpg' ], weekDay = (new Date()).getDay(); changeImage(picUrls[weekDay]);

Answer 3

你需要将数组项插入到字符串中（现在的方式，它只是一个文字字符串，完全没有引用你的数组）：

changeImage('url(' + piclnk[wkdy] + ')');

从阵列中拉出背景图像

3 个答案: