JS操作CSS随机改变网页背景
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的。具体可以这样做:
1、用JS定义一个图片数组,里面存放你想要随机展示的图片
这里我随便找来了4张图片,凑活着看看。
2、用JS产生一个随机数,当然这个随机数从0开始到imgArr.length-1结束
|
1
|
var index =parseInt(Math.random()*(imgArr.length-1)); |
这样我们就得到当前随机产生的图片
|
1
|
var currentImage=imgArr[index]; |
3、既然随机产生了一张背景图,那就用JS把这个图片作为背景图吧。
|
1
|
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")"; |
由于这是一个demo,所以我在页面上定义了一个id为BackgroundArea的div,同时也是为这个div设置随机背景的。
|
1
2
|
<div id="BackgroundArea"></div> |
JS操作CSS随机改变网页背景的更多相关文章
- JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...
- Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色
>>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...
- js操作css样式,null和undefined的区别?
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- 通过JS操作CSS
动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- js 操作css
类似于jquery的css()函数,js封装 CSS函数:css(oDiv , "width" , "200px ")设置样式css(oDiv , " ...
- JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
随机推荐
- android入门 — 多线程(一)
android中的一些耗时操作,例如网络请求,如果不能及时响应,就会导致主线程被阻塞,出现ANR,非常影响用户体验,所以一些耗时的操作,我们会想办法放在子线程中去完成. android的UI操作并不是 ...
- Qt富文本编辑器QTextDocument
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt富文本编辑器QTextDocument 本文地址:https://www.tech ...
- selenium 概念及练习 !
1.selenium中如何判断元素是否存在? 2.selenium中hidden或者是display = none的元素是否可以定位到? 3.selenium中如何保证操作元素的成功率?也就是说如何保 ...
- Mware中CentOS设置静态IP
Mware中CentOS设置静态IP 因为之前搭建的MongoDB分片没有采用副本集,最近现网压力较大,所以准备研究一下,于是在自己电脑的虚拟机中搭建环境,但是发现之前VMware设置的是DHCP ...
- (转)ActiveMQ的重连机制
花了一天的时间,终于搞明白了我的疑问. failover://(tcp://localhost:6168)?randomize=false&initialReconnectDelay=100& ...
- C#和Java在多态情况下对成员访问的比较
本文简单比较一下两种语言在里氏替换原则下,父类引用变量访问成员时的访问结果: 如果有两个类,如Person与Student,后者继承了前者,而且子类与父类有重名成员,当Person p = new S ...
- ZOJ3466-The Hive II
题意 有一个六边形格子,共 \(n\) 行,每行有 8 个位置,有一些格子不能走.求用一些环覆盖所有可走格子的方案数.\(n\le 10\) . 分析 插头dp,只不过是六边形上的,分奇数列和偶数列讨 ...
- java执行cmd命令并获取输出结果
1.java执行cmd命令并获取输出结果 import java.io.BufferedReader; import java.io.InputStreamReader; import org.apa ...
- 【数据库_Postgresql】sql查询结果添加序号列
ROW_NUMBER () OVER (ORDER BY A .ordernumber ASC) AS 序号
- 给自己的小练习19-[kuangbin带你飞]专题九连通图
没有写题解.补一波 Network of Schools 问题1:求有向图中入度为0的点个数 问题2:使得整个图变成一个联通分量 问题1直接缩点统计 问题2=max(入度为0的点,出度为0的点),注意 ...