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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Layui表格行工具事件与数据回填方法
Sep 13 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抓取百度阅读的方法示例
2016/12/18 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python Django批量导入数据
2016/03/25 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python中的TCP socket写法示例
2018/05/11 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python3中布局背景颜色代码分析
2020/12/01 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
物业管理应届生求职信
2013/10/28 职场文书
体育专业自荐书
2014/05/29 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
护士个人总结范文
2015/02/13 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers