编程 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中实现暂停的几篇文章

Mar 04 Javascript

javascript定时保存表单数据的代码

Mar 17 Javascript

js 第二代身份证号码的验证机制代码

May 12 Javascript

ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

Jan 13 Javascript

js获取TreeView控件选中节点的Text和Value值的方法

Nov 24 Javascript

页面使用密码保护代码

Apr 10 Javascript

使用闭包对setTimeout进行简单封装避免出错

Jul 10 Javascript

jQuery链式调用与show知识浅析

May 11 Javascript

JavaScript实现弹窗效果代码分析

Mar 09 Javascript

解决Vue axios post请求,后台获取不到数据的问题方法

Aug 11 Javascript

TypeScript 运行时类型检查补充工具

Sep 28 Javascript

JavaScript实现网页tab栏效果制作

Nov 20 Javascript

红米手机抢购的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

PHP中实现进程间通讯

2006/10/09 PHP

PHP中foreach循环中使用引用要注意的地方

2011/01/02 PHP

7个超级实用的PHP代码片段

2011/07/11 PHP

PHP中的use关键字概述

2014/07/23 PHP

使用CSS3实现字体颜色渐变的实现

2021/03/09 HTML / CSS

Jquery 一次处理多个ajax请求的代码

2011/09/02 Javascript

js实现div层缓慢收缩与展开的方法

2015/05/11 Javascript

javascript生成大小写字母

2015/07/03 Javascript

BootStrap学习笔记之nav导航栏和面包屑导航

2017/01/03 Javascript

js中常用的Math方法总结

2017/01/12 Javascript

jQuery图片轮播功能实例代码

2017/01/29 Javascript

ES6学习教程之模板字符串详解

2017/10/09 Javascript

Vue自定义指令写法与个人理解

2019/02/09 Javascript

Nodejs中的require函数的具体使用方法

2019/04/02 NodeJs

解决微信小程序调用moveToLocation失效问题【超简单】

2019/04/12 Javascript

Vue路由前后端设计总结

2019/08/06 Javascript

layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子

2019/09/06 Javascript

Nodejs + sequelize 实现增删改查操作

2020/11/07 NodeJs

[02:39]DOTA2国际邀请赛助威团西雅图第一天

2013/08/08 DOTA

PYTHON基础-时间日期处理小结

2018/05/05 Python

对web.py设置favicon.ico的方法详解

2018/12/04 Python

对python 多个分隔符split 的实例详解

2018/12/20 Python

python查看文件大小和文件夹内容的方法

2019/07/08 Python

使用python绘制温度变化雷达图

2019/10/18 Python

Python 去除字符串中指定字符串

2020/03/05 Python

解决pyqt5异常退出无提示信息的问题

2020/04/08 Python

Python使用Pygame绘制时钟

2020/11/29 Python

中东地区最大的奢侈品市场：The Luxury Closet

2019/04/09 全球购物

如何使用PHP session

2015/04/21 面试题

国际商务专业学生个人的自我评价

2013/09/28 职场文书

工业学校毕业生自荐信范文

2014/01/03 职场文书

干部考核工作总结2015

2015/07/24 职场文书

2019年图书室自查报告范本

2019/10/12 职场文书

Pytorch实现图像识别之数字识别(附详细注释)

2021/05/11 Python

Python识别花卉种类鉴定网络热门植物并自动整理分类

2022/04/08 Python

springboot实现string转json json里面带数组

2022/06/16 Java/Android