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中获取未知对象属性的代码
Apr 27 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
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循环获取GET和POST值的代码
2008/04/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python语音识别实践之百度语音API
2018/08/30 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python生成特定分布数的实例
2019/12/05 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
法学专业个人求职信
2013/09/26 职场文书
2014政务公开实施方案
2014/02/19 职场文书
英语教师求职信
2014/06/16 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
婚宴新郎致辞
2015/07/28 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript
Python中的嵌套循环详情
2022/03/23 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js