JS操作CSS随机改变网页背景实现思路


Posted in Javascript onMarch 10, 2014

今天有个朋友在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>
Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 #Javascript
文本域光标操作的jQuery扩展分享
Mar 10 #Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 #Javascript
js实现通用的微信分享组件示例
Mar 10 #Javascript
jquery基础教程之数组使用详解
Mar 10 #Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
js 3秒后跳转页面的实现代码
Mar 10 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
在Django中创建动态视图的教程
2015/07/15 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Python实现Linux监控的方法
2019/05/16 Python
德国网上超市:myTime.de
2019/08/26 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
物流管理应届生求职信
2013/11/07 职场文书
信息部岗位职责
2013/11/12 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
《1942》观后感
2015/06/08 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python