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中的类型和对象
Nov 29 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
详解Bootstrap插件
Apr 25 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
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实现多级树型菜单
2006/10/09 PHP
Yii核心验证器api详解
2016/11/23 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
angularJS开发注意事项
2018/05/26 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python队列Queue的详解
2019/05/10 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
空指针到底是什么
2012/08/07 面试题
公务员的自我鉴定
2013/10/26 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
公司任命书模板
2014/06/06 职场文书
工作收入住址证明
2014/10/28 职场文书
火烧圆明园观后感
2015/06/03 职场文书
2016大一新生军训感言
2015/12/08 职场文书
三年级作文之趣事作文
2019/11/04 职场文书