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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
禁止F5等快捷键的JS代码
Mar 06 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 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往windows中添加用户
2006/12/06 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
许愿墙中用到的函数
2006/10/07 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python 录制系统声音的示例
2020/12/21 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
品质主管岗位职责
2014/03/16 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
食品安全标语
2014/06/07 职场文书
关爱留守儿童标语
2014/06/18 职场文书
初中中等生评语
2014/12/29 职场文书
乐山大佛导游词
2015/02/02 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
单身证明格式样本
2015/06/15 职场文书
工作简报怎么写
2015/07/21 职场文书
申请吧主发表的感言
2015/08/03 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript