JS 和 CSS 让页面每次刷新随机产生一张背景图,当然我的回答是可以的,下面是具体的实现思路,感兴趣的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
今天有个朋友在 weibo 上问我可不可以用 JS 和 CSS 让页面每次刷新随机产生一张背景图,当然我的回答是可以的。具体可以这样做:
1、用 JS 定义一个图片数组,里面存放你想要随机展示的图片
- var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",
- "http://www.baidu.com/img/baidu_sylogo1.gif",
- "http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg",
- "http://www.open-open.com/news/uploadImg/20120111/20120111081906_76.jpg"
- ];
这里我随便找来了 4 张图片,凑活着看看。
2、用 JS 产生一个随机数,当然这个随机数从 0 开始到 imgArr.length-1 结束
- var index =parseInt(Math.random()*(imgArr.length-1));
这样我们就得到当前随机产生的图片
- var currentImage=imgArr[index];
3、既然随机产生了一张背景图,那就用 JS 把这个图片作为背景图吧。
- document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";
由于这是一个 demo,所以我在页面上定义了一个 id 为 BackgroundArea 的 div,同时也是为这个 div 设置随机背景的。
- <div id="BackgroundArea">
- </div>
来源: