如何定期更改站点范围内的背景图片？

问题描述：

我想设置一个随机的交替背景，在整个站点周期性地发生变化。例如。在任何给定的点上，随机背景图像在一段时间内在每一页上都是相同的。如何定期更改站点范围内的背景图片？

目前我有一个每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);

答

你可以散列当前时间来选择图像吗？例如一个简单的将有六个图像，然后基于当前时间的倒数第二个数字来选择图像，例如，

10:08 - 挑图像＃0
10:15 - 挑图像＃1
10:20 - 挑图像＃2
10时51分 - 挑图像＃5

答

我会做的是要么在Web服务器上编程生成CSS（即使用CSS输出的脚本），要么在生成网页时动态更改样式表链接。

答

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

答

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

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

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

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

答

杰弗里的想法似乎是这一目的的优良和简单的解决方案，除非背景需要是所有游客（这需要一个服务器端解决方案）中完全随机的和相同的：

使用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分钟）

答

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

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

将其封装在Javascript文件并将其链接到您的网站的任何页面。

该脚本将改变网站的背景下，基于时间的小时（即0-23小时）

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

答

< 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-02 01:20:58

如何定期更改站点范围内的背景图片？

相关推荐