刷新页面时JavaScript随机更换背景图，更换背景选择时背景预览
作者:随然 日期:2009-01-19
有时为了充分展示我们的页面，我们会希望用户每次进入页面时Banner条或者背景图能够是一组随机的图。
有时候在做网页时，你的程序有更换背景的功能，当用户选择另外的背景时，为了让用户能很快很方便的确定他对选择的背景是否喜欢，我们需要做一个背景预览功能。用户选择背景时，网页的背景自动更换。如何实现呢？当然是用JavaScript了，并且非常简便，今天我们就来完整的讨论这个问题。
首先，要达到随机展示目的，我们需要一个随机函数，这里我推荐这个函数：
复制内容到剪贴板
程序代码
程序代码以下为JavaScript内容：
//randomizer.Generate random numbers。
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};
function rand(number) {
return Math.ceil(rnd()*number);
};
//randomizer.Generate random numbers。
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};
function rand(number) {
return Math.ceil(rnd()*number);
};
以上随机函数的使用方法：rand(N)。表示生成一个0-N之间的无重复随机数。
其次，我们要了解JavaScript操作DOM来更换背景图和某个ID选择器的图片。我举两2个例子：
复制内容到剪贴板 程序代码
程序代码以下为JavaScript内容：
//JavaScript更换背景图：
document.body.style.backgroundImage="url(image/code52net_bg.jpg)";
//JavaScript更换背景图：
document.body.style.backgroundImage="url(image/code52net_bg.jpg)";
上面这个代码就可以达到我们说的背景预览功能，如下面这个具体的代码：
复制内容到剪贴板 程序代码
程序代码<select name="bgpic" id="bgpic" onchange="document.body.style.backgroundImage='url(bgpic/'+options[selectedIndex].value+'.gif)';">
<option value="0" selected>请选择背景</option>
<option value="1">背景1</option>
<option value="2">背景2</option>
<option value="3">背景3</option>
</select>
<option value="0" selected>请选择背景</option>
<option value="1">背景1</option>
<option value="2">背景2</option>
<option value="3">背景3</option>
</select>
复制内容到剪贴板 程序代码
程序代码以下为JavaScript内容：
//JavaScript更换某个HTML容器的ID背景图，请注意，我这里是以ID名为header做例子，请按实际情况修改：
document.getElementById("header").style.backgroundImage="url(bg.jpg)";
//请注意图片路径
//JavaScript更换某个HTML容器的ID背景图，请注意，我这里是以ID名为header做例子，请按实际情况修改：
document.getElementById("header").style.backgroundImage="url(bg.jpg)";
//请注意图片路径
然后，有了前面的这两步，想必大家都知道下面改怎么做了：先产生一个随机数，然后更换图片即可。
复制内容到剪贴板 程序代码
程序代码以下为JavaScript内容：
//Change header image by radomized numbers
var n=rand(7);//实例产生了一个0-7的随机数
if(n==0){//判断产生的随机数，然后更换即可。
document.getElementById("header").style.backgroundImage="url(banner.jpg)";
}
else if (n==1){
document.getElementById("header").style.backgroundImage="url(bannerr_1.jpg)";
}else if (n==2){
document.getElementById("header").style.backgroundImage="url(banner_2.jpg)";
}else if (n==3){
document.getElementById("header").style.backgroundImage="url(banner_3.jpg)";
}else if (n==4){
document.getElementById("header").style.backgroundImage="url(banner_4.jpg)";
}else if (n==5){
document.getElementById("header").style.backgroundImage="url(banner_5.jpg)";
}else if (n==6){
document.getElementById("header").style.backgroundImage="url(banner_6.jpg)";
}else if (n==7){
document.getElementById("header").style.backgroundImage="url(banner_7.jpg)";
};
//Change header image by radomized numbers
var n=rand(7);//实例产生了一个0-7的随机数
if(n==0){//判断产生的随机数，然后更换即可。
document.getElementById("header").style.backgroundImage="url(banner.jpg)";
}
else if (n==1){
document.getElementById("header").style.backgroundImage="url(bannerr_1.jpg)";
}else if (n==2){
document.getElementById("header").style.backgroundImage="url(banner_2.jpg)";
}else if (n==3){
document.getElementById("header").style.backgroundImage="url(banner_3.jpg)";
}else if (n==4){
document.getElementById("header").style.backgroundImage="url(banner_4.jpg)";
}else if (n==5){
document.getElementById("header").style.backgroundImage="url(banner_5.jpg)";
}else if (n==6){
document.getElementById("header").style.backgroundImage="url(banner_6.jpg)";
}else if (n==7){
document.getElementById("header").style.backgroundImage="url(banner_7.jpg)";
};
对于大数量的图片来说，还可以用数组来存储图片路径，然后用For循环，这样效率更高一些；
最后，还有一点大家要注意的，请将JavaScript代码放置在页面的最底部。否则可能无法看到效果。
[本日志由 随然 于 2009-01-19 04:46 PM 编辑]
上一篇: Cookies的设计，时间过期的设计。
下一篇: 德阳中学的钱不好拿啊
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 网页 javascript 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 18189
发表评论
