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 ...
随机推荐
- Java 将数字转为16进制,然后转为字符串类型
public class ArrayTest3 { public static void main(String[] args){ System.out.println(toHex(60)); } / ...
- sql nolock是什么
百度:SQL Server 中的 NOLOCK 到底是什么意思? 文章地址:http://blog.sina.com.cn/s/blog_7d3b18a50100rfwg.html 查询语句加上 no ...
- tomcat配置服务
1.在server中右键添加tomcat 2.双击tomcat打开配置窗口添加jvm参数 -Doapath="C:\exeye-workspace\exEyeWeb\oadoc" ...
- lintcode-413-反转整数
413-反转整数 将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 样例 给定 x = 123,返回 321 给定 x = -123,返回 -321 标签 整数 ...
- C++ Primer Plus学习:第十三章
第十三章 类继承 继承的基本概念 类继承是指从已有的类派生出新的类.例: 表 0-1 player.h class player { private: string firstname; string ...
- scrum 项目准备1.0
---3.0--------------------------------------------------------------------- 5.Scrum团队成立 5.1 团队名称,团队目 ...
- phpcms前端模板目录与文件结构分析图【templates】
phpcms前端模板目录与文件结构分析图[templates] 原文地址:http://www.iphpcms.net/phpcms-ziliao/2015_14.html
- 使用nginx反向代理时,如何正确获取到用户的真实ip
在记录日志的的时候,获取用户的信息,比如用户的ip,浏览器等等信息是十分重要的. 但是在使用nginx反向代理的时候,可能经过转发无法获取到用户的真实的ip, 在此情况下需要配置nginx,让其在转发 ...
- php 随机密码和盐 来自wordpress
生成随机密码或盐. Generate keys and salts using secure CSPRNG $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJ ...
- 【bzoj4027】[HEOI2015]兔子与樱花 树形dp+贪心
题目描述 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...