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 相关文章推荐
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
秦兵马俑教学反思
2014/02/07 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
查摆剖析材料范文
2014/09/30 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
python用tkinter开发的扫雷游戏
2021/06/01 Python
python flask开发的简单基金查询工具
2021/06/02 Python
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫