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 ...
随机推荐
- 周总结web未完成的代码
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...
- asp.net如何实现跟踪检查用户知否查看了邮件。
有时我们有这样一种需求场景,我们给很多用户发了邮件,需要一个反馈,用户是否查看了我们发送的邮件,百度了以下果然有方案. 我总结实践了下这个过程,同时有自己的一点使用感受.记录下希望对你有帮助. 有人想 ...
- VC++调试基础
一.调试基础 调试快捷键 F5: 开始调试 Shift+F5: 停止调试 F10: 调试到下一句,这里是单步跟踪 F11: 调试到下一句,跟进函数内部 Shift+F11: 从当前函数中跳 ...
- 注解实现IOC和DI
1.组件扫描 Spring3.0后为我们引入了组件自动扫描机制,它可以在类路径底下寻找标注了@Component.@Service.@Controller.@Repository注解的类,并把这些类纳 ...
- centOS7设置静态ip后无法上网的解决,【亲可测】
最近在VMware虚拟机里玩Centos,装好后发现上不了网.经过一番艰辛的折腾,终于找到出解决问题的方法了.最终的效果是无论是ping内网IP还是ping外网ip,都能正常ping通.方法四步走: ...
- C# 事件总线 EventBus
1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集中式事件处理机制,允许不同的组件之间进行彼此通信而又不需 ...
- perf的采样模式和统计模式
perf的采样模式和统计模式 统计模式和采样模式使用寄存器的方法不相同; 在统计模式下,每次调度之前设置寄存器,调度之后清理寄存器,留个下个进程使用;PMU寄存器的使用方法; 在采样模式下,每次 pm ...
- jquery.fullpage 全屏滚动
参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...
- 【JavaScript&jQuery】$.ajax()
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json" ...
- URAL1519 Formula 1 【插头dp】
题目链接 URAL1519 题解 看题型显然插头\(dp\) 考虑如何设计状态 有这样一个方案 当我们决策到某个位置 轮廓线长这样 你会发现插头一定是相互匹配的 所以我们实际上可以把状态用括号序列表示 ...