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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
DOM事件探秘篇
Feb 15 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
vue-router传参用法详解
Jan 19 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 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
详解js异步文件加载器
2016/01/24 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python rstrip()方法实例详解
2018/11/11 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
个人对照检查材料
2014/02/12 职场文书
工作保证书范文
2014/04/29 职场文书
北京奥运会主题口号
2014/06/13 职场文书
欢迎横幅标语
2014/06/17 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书