今天有个朋友在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随机改变网页背景的更多相关文章

  1. JS操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...

  2. Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色

    >>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...

  3. js操作css样式,null和undefined的区别?

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  4. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  5. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

  6. 通过JS操作CSS

    动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. js 操作css

    类似于jquery的css()函数,js封装 CSS函数:css(oDiv , "width" , "200px ")设置样式css(oDiv , " ...

  8. JS操作CSS样式

    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...

  9. JS操作css样式用法

    //html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...

随机推荐

  1. 【第一周】c++实现词频统计

    coding.net地址:https://coding.net/u/Boxer_ ssh:git@git.coding.net:Boxer_/homework.git ---------------- ...

  2. linux应用自启动配置

    Linux在启动时,会自动执行/etc/rc.d目录下的初始化程序,因此我们可以把启动任务放到该目录下: 1.因为其中的rc.local是在完成所有初始化之后执行,因此可以把启动脚本写到里面: 2.用 ...

  3. [翻译]API Guides - Layouts

    官方文档地址:http://developer.android.com/guide/topics/ui/declaring-layout.html PS:API Guides里面的内容不免都简单些,翻 ...

  4. Java容器深入浅出之数组

    写在前面 关于Java的学习,特别是对于非计算机专业的同学来说,我总是主张从实践中来,到实践中去的学习方法.Java本身是一门应用性特别强的高级编程语言,因此如果能在基于实际开发的经验基础上,对Jav ...

  5. floyd最短路

    floyd可以在O(n^3)的时间复杂度,O(n^2)的空间复杂度下求解正权图中任意两点间的最短路长度. 本质是动态规划. 定义f[k][i][j]表示从i出发,途中只允许经过编号小于等于k的点时的最 ...

  6. Qt——数据的隐式共享

    一.隐式共享类 在Qt中有很多隐式共享类( Implicitly Shared Classes ),什么是隐式共享呢,请参考官方文档的说明. 好吧,翻译一下—— 许多C++类隐式地共享数据,使得资源使 ...

  7. BZOJ3712 PA2014Fiolki(kruskal重构树)

    对合并过程建树.然后只需要按照时间顺序考虑每个反应就行了,时间顺序根据lca的深度确定. #include<iostream> #include<cstdio> #includ ...

  8. 转:SVM与SVR支持向量机原理学习与思考(一)

    SVM与SVR支持向量机原理学习与思考(一) 转:http://tonysh-thu.blogspot.com/2009/07/svmsvr.html 弱弱的看了看老掉牙的支持向量机(Support ...

  9. 转:pairwise 代码参考

    Learning to rank with scikit-learn: the pairwise transform http://fa.bianp.net/blog/2012/learning-to ...

  10. elasticsearch 第四篇(API约定)

    对多个indices进行操作 es中大多resetapi支持请求多个index, 例如”test1,test2,test3”,index也可以使用通配符, 例如”test*“, 还可以使用+,-来包含 ...