使用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>
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