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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
js实现新年倒计时效果
Dec 10 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js仿微博动态栏功能
Feb 22 Javascript
Vue.use源码学习小结
Jun 20 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
React forwardRef的使用方法及注意点
Jun 13 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一维二维数组键排序方法实例总结
2014/11/13 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
javascript 写类方式之三
2009/07/05 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript Split()方法
2015/12/18 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
详解python之简单主机批量管理工具
2017/01/27 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
银行反洗钱宣传活动总结
2015/05/08 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python