使用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 相关文章推荐
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
分类解析jQuery选择器
Nov 23 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
jquery插件实现悬浮的菜单
Apr 24 jQuery
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
红米手机抢购的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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
初识ThinkPHP控制器
2016/04/07 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
利用Python如何生成随机密码
2016/04/20 Python
python多线程方式执行多个bat代码
2016/06/07 Python
详解python中的装饰器
2018/07/10 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
高中军训感想300字
2014/03/04 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
实习介绍信范文
2015/05/05 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python