今天有个朋友在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. Python学习笔记(二)--变量和数据类型

    python中的数据类型 python中什么是变量 python中定义字符串 raw字符串与Unicode字符串 python中的整数和浮点数 python中的bool类型 --- python中的数 ...

  2. lintcode-120-单词接龙

    120-单词接龙 给出两个单词(start和end)和一个字典,找到从start到end的最短转换序列 比如: 每次只能改变一个字母. 变换过程中的中间单词必须在字典中出现. 注意事项 如果没有转换序 ...

  3. Linux输入子系统:多点触控协议 -- multi-touch-protocol.txt768

    转自:http://blog.csdn.net/droidphone/article/details/8434768 Multi-touch (MT) Protocol --------------- ...

  4. 小程序 switch按钮

    <view class='pay-switch'> <switch color='#1F3238' data-gongprice='{{gongprice}}' data-disco ...

  5. Django之ORM其他骚操作

    Django ORM执行原生SQL # extra # 在QuerySet的基础上继续执行子语句 # extra(self, select=None, where=None, params=None, ...

  6. javascript之彻底理解this

    彻底理解this,需要彻底理解函数 函数是复杂类型,存储在堆中.  函数是独立的, 对象中的方法只是对象中有个函数的引用 函数被调用时,调用者会像被调用者提供个上下文环境, 这个环境就是this 构造 ...

  7. MySQL专题3 SQL 优化

    这两天去京东面试,面试官问了我一个问题,如何优化SQL 我上网查了一下资料,找到了不少方法,做一下记录 (一). 首先使用慢查询分析  通过Mysql 的Slow Query log 可以找到哪些SQ ...

  8. post和updatebatch区别 delphi

    Post是确认当前的修改,而UpdateBatch是把已经确认但是没有存盘的数据写入数据库如果不是使用批量更新的方式的时候,Post的时候,确认的修改直接写入数据库. 我弄了一个例子是ado的.往数据 ...

  9. js简易随机打乱数组方法

    打乱随机数算法很多,不过看这个还挺简便的,记录下来. function shuffle(a) { var len = a.length; for(var i=0;i<len;i++){ var ...

  10. bzoj2013[CEOI2010] A huge tower

    题意 有N(2<=N<=620000)快砖,要搭一个N层的塔,要求:如果砖A恰好在砖B上面,那么A不能比B的长度+D要长.问有几种方法,输出 答案 mod 1000000009的值 分析 ...