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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
js前端图片加载异常兜底方案
Jun 21 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
js设置默认时间跨度过程详解
2019/07/17 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python抓取文件夹的所有文件
2018/02/27 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
大学生社会实践自我鉴定
2014/03/24 职场文书
中学生逃课检讨书
2015/02/17 职场文书
刑事辩护词范文
2015/05/21 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle