0

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

目前我的背景图片每 30 分钟用这个 javascript 改变一次：（来自这里： 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);
4

7 回答 7

2

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

  • 10:08 - 选择图像 #0
  • 10:15 - 选择图像 #1
  • 10:20 - 选择图像 #2
  • 10:51 - 选择图像 #5
于 2009-06-15T05:58:14.833 回答
1

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

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

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

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

于 2009-06-15T07:38:05.530 回答
1

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

使用 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 分钟）
于 2012-08-10T12:30:59.140 回答
0

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

于 2009-06-15T05:58:47.797 回答
0

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

于 2009-06-15T06:57:52.303 回答
0

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

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

将其包装在 Javascript 文件中并将其链接到您网站的每个页面。

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

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

于 2012-11-28T07:27:20.490 回答
-1 
< 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>
于 2013-08-02T01:02:26.033 回答