编程 Javascript

使用js操作css实现js改变背景图片示例

Posted in Javascript onMarch 10, 2014

1、用JS定义一个图片数组，里面存放你想要随机展示的图片

ar imgArr=["https://3water.com/logo_cn.png",
"https://3water.com/baidu_sylogo1.gif",
"https://3water.com/news/uploadImg/20120111/20120111081906_79.jpg",
 "https://3water.com/news/uploadImg/20120111/20120111081906_76.jpg"];

上面的图片请大家换成自己的。

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>

使用js操作css实现js改变背景图片示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript学习笔记9 prototype封装继承

Jan 11 Javascript

JavaScript中实现块作用域的方法

Apr 01 Javascript

Javascript实现CheckBox的全选与取消全选的代码

Jul 20 Javascript

利用javascript的面向对象的特性实现限制试用期

Aug 04 Javascript

Javascript闭包用法实例分析

Jan 23 Javascript

浅析BootStrap Treeview的简单使用

Oct 12 Javascript

jQuery+koa2实现简单的Ajax请求的示例

Mar 06 jQuery

Vue.js中的computed工作原理

Mar 22 Javascript

vue 标签属性数据绑定和拼接的实现方法

May 17 Javascript

vue全局自定义指令-元素拖拽的实现代码

Apr 14 Javascript

在vue中利用全局路由钩子给url统一添加公共参数的例子

Nov 01 Javascript

jQuery实现简单轮播图效果

Dec 27 jQuery

红米手机抢购的js代码

Mar 10 #Javascript

按下回车键指向下一个位置的一个函数代码

Mar 10 #Javascript

用js判断输入是否为中文的函数

Mar 10 #Javascript

用IE重起计算机或者关机的示例代码

Mar 10 #Javascript

屏蔽相应键盘按钮操作

Mar 10 #Javascript

JavaScript对IE操作的经典代码(推荐)

Mar 10 #Javascript

JS中类或对象的定义说明

Mar 10 #Javascript

You might like

WINXP下apache+php4+mysql

2006/11/25 PHP

使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT

2011/04/23 PHP

用php+ajax新建流程（请假、进货、出货等）

2017/06/11 PHP

YII2框架中excel表格导出的方法详解

2017/07/21 PHP

php实现简单的权限管理的示例代码

2017/08/25 PHP

Alliance vs Liquid BO3 第一场2.13

2021/03/10 DOTA

Javascript中的关键字和保留字整理

2014/10/16 Javascript

基于JavaScript怎么实现让歌词滚动播放

2015/11/03 Javascript

bootstrap fileinput完整实例分享

2016/11/08 Javascript

jQuery插件zTree实现的基本树与节点获取操作示例

2017/03/08 Javascript

react-native ListView下拉刷新上拉加载实现代码

2017/08/03 Javascript

javascript流程控制语句集合

2017/09/18 Javascript

Windows安装Node.js报错:2503、2502的解决方法

2017/10/25 Javascript

JavaScript设计模式之代理模式简单实例教程

2018/07/03 Javascript

Vue.js单向绑定和双向绑定实例分析

2018/08/14 Javascript

JS实现方形抽奖效果

2018/08/27 Javascript

在js代码拼接dom对象到页面上的模板总结

2018/10/21 Javascript

TypeScript基础入门教程之三重斜线指令详解

2018/10/22 Javascript

JavaScript遍历数组的三种方法map、forEach与filter实例详解

2019/02/27 Javascript

layui异步加载table表中某一列数据的例子

2019/09/16 Javascript

解决Echarts2竖直datazoom滑动后显示数据不全的问题

2020/07/20 Javascript

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

2020/07/24 Javascript

javascript实现京东登录显示隐藏密码

2020/08/02 Javascript

apache部署python程序出现503错误的解决方法

2017/07/24 Python

django定期执行任务(实例讲解)

2017/11/03 Python

python的socket编程入门

2018/01/29 Python

Django利用cookie保存用户登录信息的简单实现方法

2019/05/27 Python

在python里创建一个任务(Task)实例

2020/04/25 Python

PyQt5 文本输入框自动补全QLineEdit的实现示例

2020/05/13 Python

北美领先的牛仔品牌：Buffalo David Bitton

2017/05/22 全球购物

药学专业个人自我评价

2013/11/11 职场文书

工作室成员个人发展规划范文

2014/01/24 职场文书

敬老模范事迹

2014/05/21 职场文书

留学推荐信英文范文

2015/03/26 职场文书

2016暑期社会实践心得体会范文

2016/01/14 职场文书

《巨人的花园》教学反思

2016/02/19 职场文书