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 ...
随机推荐
- ProcessList.java和adj值
简单地讲,adj值决定了在系统资源吃紧的情况下,要先杀掉哪些进程. 在Android的lowmemroykiller机制中,会对于所有进程进行分类,对于每一类别的进程会有其oom_adj值的取值范围, ...
- angularjs 指令间相互调用
<div ng-app="app"> <div ng-controller="myctl"> <button superman s ...
- 【bzoj3774】最优选择 网络流最小割
题目描述 小N手上有一个N*M的方格图,控制某一个点要付出Aij的代价,然后某个点如果被控制了,或者他周围的所有点(上下左右)都被控制了,那么他就算是被选择了的.一个点如果被选择了,那么可以得到Bij ...
- Java开发Excel POI getPhysicalNumberOfCells 与 getLastCellNum的区别
1.getPhysicalNumberOfCells 与 getLastCellNum的区别 用org.apache.poi的包做excel导入,无意间发明若是excel文件中有空列,空列后面的数据全 ...
- 题解 P1781 【宇宙总统】
小金羊发现用的方法和python大佬们的方法还是不一样... (大概是我太弱了qAq) emmm... (Mode:Python 3)Code: a=int(input()) #几个数 L=list( ...
- [BZOJ4540][HNOI2016]序列 莫队
4540: [Hnoi2016]序列 Time Limit: 20 Sec Memory Limit: 512 MB Description 给定长度为n的序列:a1,a2,…,an,记为a[1:n ...
- QString::QString 中文乱码
QString::QString 中文乱码 处理方法: 1. QString str = QString::fromLocal8Bit("中文"); // vs2008 vs200 ...
- 【BZOJ2806】Cheat(后缀自动机,二分答案,动态规划,单调队列)
[BZOJ2806]Cheat(后缀自动机,二分答案,动态规划,单调队列) 题面 BZOJ 洛谷 题解 很有趣的一道题啊 对于在所有的串上面进行匹配? 很明显的后缀自动机 所以先构建出广义后缀自动机 ...
- BZOJ3261:最大异或和——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3261 给定一个非负整数序列{a},初始长度为N. 有M个操作,有以下两种操作类型: 1.A x:添加 ...
- Linux正确的关机方式
本人还未入门,仅看书所得. Linux不建议的是直接关电源.Linux后台可能有多人在工作,直接关电源可能造成文件的毁坏. 正常关机之前应该干两件事:一.查看一下谁在线:二.通知一下别人啦,通知别人可 ...