-1

这是一个真正的“菜鸟”问题，但我正在努力使用 javascript。我希望背景图像在一周中的每一天都发生变化。我想我已经正确实现了日期功能。对于放置在数组中的 7 个图像中的每一个，我都有一个完整的 URL。我有一个通过正文中的按钮起作用的功能。我想我错误地调用了数组元素以将它们传递给 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>
4

3 回答 3

1

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

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

此外，正如您所知，构建数组的更好方法是：

var piclnk = [
    'http://first/image.jpg',
    'http://second/image.jpg',
    'etc'
];
于 2012-11-06T20:13:36.097 回答
1

我可以建议在更改函数中添加 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]);
于 2012-11-06T20:17:18.147 回答
0

您需要将数组项插入到字符串中（您现在拥有它的方式，它只是一个文字字符串，根本不引用您的数组）：

changeImage('url(' + piclnk[wkdy] + ')');
于 2012-11-06T20:13:27.530 回答