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 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue实例中data使用return包裹的方法
Aug 27 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
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python3.6数独问题的解决
2019/01/21 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
考试不及格检讨书
2014/01/09 职场文书
小学科学教学反思
2014/01/26 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Python初学者必备的文件读写指南
2021/06/23 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis