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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 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中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
splice slice区别
2006/10/09 Javascript
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
webpack之引入图片的实现及问题
2018/10/08 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python 实现简单的电话本功能
2015/08/09 Python
python僵尸进程产生的原因
2017/07/21 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
骨干教师培训制度
2014/01/13 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
学习决心书
2014/03/11 职场文书
业务内勤岗位职责
2015/04/13 职场文书
经营目标责任书
2015/05/08 职场文书
Python上下文管理器Content Manager
2021/06/26 Python