Question

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

目前，我的背景图片每隔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: ... }

示例：

<div class="background-0"></div> （00-09分钟）
<div class="background-1"></div> （分钟10-19）
<div class="background-2"></div> （分钟20-29）
<div class="background-3"></div> （会议纪要30-39）
<div class="background-4"></div> （分钟40-49）
<div class="background-5"></div> （分钟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>

如何在网站范围内定期更改背景图片？

7 个答案: