今天有个朋友在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. mysqldump without auto_increment

    mysqldump -u root -p -h <db-host> --opt <db-name> -d --single-transaction | sed 's/ AUTO ...

  2. BETA预发布演示视频

    视频连接:优酷http://v.youku.com/v_show/id_XMTgxMjQxMjc0NA==.html?from=y1.7-2

  3. crontab部署定时任务

    1.安装cron工具:apt-getinstall cron 2.开启定时任务:crontab –e 定时任务语句格式为:执行周期+命令. 周期有5个域,分别是分,时,日(day of month), ...

  4. 关于 Oracle Preinstallation RPM

    About the Oracle Preinstallation RPM 来源 https://docs.oracle.com/en/database/oracle/oracle-database/1 ...

  5. mysql 中文字段排序

    方法1)select * from mytable order by CONVERT(chineseColumnName USING gbk);  (备注:chineseColumnName 位排序字 ...

  6. 辣鸡蒟蒻Klaier的一些计划

    需要熟练的东西:cdq分治,堆,树链剖分,tarjan及其它一些图论算法,网络流,kmp,字符串哈希,线段树主席树,树状数组,斜率优化dp 需要学的东西:lct,后缀数组,AC自动机,平衡树 球队收益 ...

  7. CodeChef KnightMov

    码死了...考试的时候基本上是写一会儿思考一会儿人生....考完了调了调...最后400行+....不应该这么长的....以后重写一下再补题解..... 也许这就是蒟蒻吧.jpg 安利cstdio博客 ...

  8. 【Mybatis】<foreach>标签在mybatis中的使用

    mapper.xml如下: <select id="selectCkspcb" parameterType="java.util.Map" resultT ...

  9. Unity3D手游开发日记(6) - 适合移动平台的水深处理

    市面上大部分的手机游戏,水面都比较粗糙,也基本没发现谁做过水深的处理. 水深的处理在PC平台比较容易,因为很容易获得每个像素的深度,比如G-Buffer,有了像素的深度,就能计算出每个像素到水面的距离 ...

  10. Sqoop数据迁移工具

    一.概述 sqoop 是 apache 旗下一款“ Hadoop 和关系数据库服务器之间传送数据”的工具. 导入数据: MySQL, Oracle 导入数据到 Hadoop 的 HDFS. HIVE. ...