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的caller,callee,call,apply
Apr 28 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
原生js实现选项卡功能
Mar 08 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
JavaScript实现简单日历效果
2020/09/11 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
详解Python Socket网络编程
2016/01/05 Python
单利模式及python实现方式详解
2018/03/20 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
傲盾软件面试题
2015/08/17 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
小学教师评语大全
2014/04/23 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
python 管理系统实现mysql交互的示例代码
2021/12/06 Python