今天有个朋友在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. HDU 5672 String

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5672 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  2. ImportError: No module named examples.tutorials.mnist

    Traceback (most recent call last):   File "nearest_neighbor.py", line 14, in <module> ...

  3. vue-cli脚手架搭建

    我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事 Vue+ ...

  4. webpack打包多html开发案例

    简单说明: 1,案例没有使用devserver,所以不能实时查看 2,案例是将src下面的html.css.js分别进行处理 3,多html的规律是需要有多个entry,每个html一个entry,当 ...

  5. 一次性无重复配置VS项目插件属性的方法

    在VS中需要使用opencv开源库或mysql等数据库时,为了能使用开源库或数据库的语言,需要添加库文件和包含目录等等.然而直接在[解决方案管理器]-->属性中配置的话,写下一个项目(解决方案) ...

  6. 更新user的方法

    from django.contrib.auth.admin import UserAdmin from django.contrib.auth.forms import UserChangeForm ...

  7. [讲解]sql except和intersect运算符(比拟两个或多个select语句的结果并前去非重复值)

    图 1 UNION 中若有重复的行,会被移除,只留下一个 1.简介 EXCEPT和INTERSECT运算符使您可以比较两个或多个SELECT语句的结果并返回非重复值. 2.区别 EXCEPT运算符返回 ...

  8. [LeetCode] MaximumDepth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. CF337D-Book of Evil

    题目 一棵树上有一个古籍,这个古籍可以影响到与它距离为 \(d\) 以内的点.现在给出被影响到的点,问古籍可能在多少个点上. \(0\le m,d\le n\le 10^5\). 分析 原问题不好做, ...

  10. C++解析(23):多态与C++对象模型

    0.目录 1.多态 2.C++对象模型 2.1 使用C语言实现封装 3.继承对象模型 4.多态对象模型 4.1 使用C语言实现多态 5.小结 1.多态 面向对象中期望的行为: 根据实际的对象类型判断如 ...