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 动态添加表格行
Jun 22 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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分页类的代码
2011/05/18 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
JS给超链接加确认对话框的方法
2015/02/24 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python PyQt5整理介绍
2020/04/01 Python
Python实现弹球小游戏
2020/08/01 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
高中军训的心得体会
2014/09/01 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Java 超详细讲解hashCode方法
2022/04/07 Java/Android