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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
vue的mixins属性详解
2018/03/14 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python性能优化的20条建议
2014/10/25 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
全球性的女装店:storets
2019/06/12 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
节电标语大全
2014/06/23 职场文书