JS操作CSS随机改变网页背景实现思路


Posted in Javascript onMarch 10, 2014

今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的。具体可以这样做:
1、用JS定义一个图片数组,里面存放你想要随机展示的图片

var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", 
"http://www.baidu.com/img/baidu_sylogo1.gif", 
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg", 
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_76.jpg" 
];

这里我随便找来了4张图片,凑活着看看。
2、用JS产生一个随机数,当然这个随机数从0开始到imgArr.length-1结束
var index =parseInt(Math.random()*(imgArr.length-1));

这样我们就得到当前随机产生的图片
var currentImage=imgArr[index];

3、既然随机产生了一张背景图,那就用JS把这个图片作为背景图吧。
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";

由于这是一个demo,所以我在页面上定义了一个id为BackgroundArea的div,同时也是为这个div设置随机背景的。
<div id="BackgroundArea"> 
</div>
Javascript 相关文章推荐
JavaScript更改字符串的大小写
May 07 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JS打印组合功能
Aug 04 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
jquery插件开发之实现jquery手风琴功能分享
Mar 10 #Javascript
文本域光标操作的jQuery扩展分享
Mar 10 #Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 #Javascript
js实现通用的微信分享组件示例
Mar 10 #Javascript
jquery基础教程之数组使用详解
Mar 10 #Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
js 3秒后跳转页面的实现代码
Mar 10 #Javascript
You might like
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
征婚广告词
2014/03/17 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
班级团队活动方案
2014/08/14 职场文书
个人职业及收入证明
2014/10/13 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2015年招聘工作总结
2014/12/12 职场文书
朋友聚会开场白
2015/06/01 职场文书
高中班主任寄语
2019/06/21 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
MySQL数据库 任意ip连接方法
2022/05/20 MySQL