如何定期更改整个站点的背景图像？

Question

我正在尝试设置一个随机交替背景，该背景在整个网站上定期变化。 例如，在任何给定点，一段时间内每个页面上的随机背景图像都是相同的。

目前，我的背景图像使用此 javascript 每 30 分钟更改一次：（来自此处：http://www.blogfodder.co.uk/post/2008/01/JavaScript-CSS-Random-Background-Image.aspx)

然而问题是每个链接随机化每个新页面上的背景。

function ChangeCSSBgImg() {
    if (!document.getElementById) return false;

    var MyElement = "bgimg" 
    var ImgPath = "../i/" 

    if (!document.getElementById(MyElement)) return false;

    var random_images = new Array ();
    random_images[0] = "bg1.jpg"; // these are the background images
    random_images[1] = "bg2.jpg"; 
    random_images[2] = "bg3.jpg"; 
    random_images[3] = "bg4.jpg"; 
    random_images[4] = "bg5.jpg"; 

    var $header = document.getElementById(MyElement);
    var $backgroundurl = $header.style.backgroundImage;
    var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

    if ($backgroundurl != ImgURL) {
        $header.style.backgroundImage = ImgURL; 
    }

    movement = setTimeout("ChangeCSSBgImg()",108000000); 
}


/* random number generator */
function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}

/* Custom onload function */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
/* trigger onload */
addLoadEvent(ChangeCSSBgImg);

Answer 1

你能散列当前时间来选择图像吗？ 例如，一个简单的方法是，有六个图像，然后根据当前时间倒数第二个数字选择图像，例如

• 10:08 - 选择图像 #0
• 10:15 - 选择图像 #1
• 10:20 -选择图像 #2
• 10:51 - 选择图像 #5

Answer 2

我建议您不要为此存储任何信息 - 它应该根据先验信息工作，例如 Jeffrey Kemp 建议的系统时间。 这将使其更加稳定并可以跨更多用户代理工作。

例如，获取 UNIX 时间戳将允许您每秒更改背景。

请记住，某些用户的连接速度较慢，可能无法立即加载背景图像。

一种简单的方法是使用 setInterval 每 30 分钟迭代一次图像数组，并在选择最后一个图像后重置。

Answer 3

杰弗里的想法似乎是一个很好且简单的解决方案，除非所有访问者的背景需要完全随机且相同（这需要服务器端解决方案）：

使用 javascript 根据时间（小时、分钟或任何）。
然后使用 CSS 设置图像： .background-0 { background-image: ... }

示例：

• < /code> （00-09 分钟）

• （10-19 分钟）< /em>

• （20-29 分钟）

• （30-39 分钟）

• （40-49 分钟）

• （50-59 分钟） >

Answer 4

我要做的就是在 Web 服务器上以编程方式生成 CSS（即带有 CSS 输出的脚本），或者在生成网页时动态更改样式表链接。

Answer 5

您可以将背景图像信息存储在用户会话中并定期在服务器端更新。 这是假设您使用的是在服务器上解析的语言。

Answer 6

使用 Javascript，你可以做这样的事情。

function changeBg()
    document.body.style.backgroundImage = 'url(bg/'+ new Date().getHours() +'.gif)';
}
    window.setInterval(changeBg, 1000);

将其封装在 Javascript 文件中并将其链接到站点的每个页面。

该脚本将根据时间（即0-23小时）更改网站的背景。

这里，图像存储在bg目录中，名称范围为0代码> 到 <代码>23。 不涉及随机性，因为图像将根据一天中的时间进行选择。 您可以根据需要稍微更改脚本。

Answer 7

< script type = "text/javascript" > var now = new Date () ;
var hours = now. getHours() ;
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document. write( 'It' s now: ', hours, ' < br >< br > ');
document.bgColor="#CC9900";
//18-19 night

if (hours > 17 && hours < 20){
    document.write (' < body style = "background-color: orange" > ');
}
//20-21 night
else if (hours > 19 && hours < 22){
    document.write (' < body style = "background-color: orangered" > ');
}
//22-4 night
else if (hours > 21 || hours < 5){
    document.write (' < body style = "background-color: #C0C0C0;" > ');
}
//9-17 day
else if (hours > 8 && hours < 18){
    document.write (' < body style = "background-color: #616D7E" > ');
}
//7-8 day
else if (hours > 6 && hours < 9){
    document.write (' < body style = "background-color: skyblue" > ');
}
//5-6 day
else if (hours > 4 && hours < 7){
    document.write (' < body style = "background-color: steelblue" > ');
}
else {
    document.write (' < body style = "background-color: white" > ');
}
</script>