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 动态创建VML的方法
Oct 14 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
koa-router源码学习小结
Sep 07 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 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中的array数组类型分析说明
2010/07/27 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
两款万能的php分页类
2015/11/12 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jquery实现图片左右切换的方法
2015/05/07 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
Sanic框架基于类的视图用法示例
2018/07/18 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python 实现图片批量压缩的示例
2020/12/18 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
记者岗位职责
2014/01/06 职场文书
校园招聘策划书
2014/01/09 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
经典祝酒词大全
2015/08/12 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL