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 指导方针
Apr 05 Javascript
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
JS闭包经典实例详解
Dec 20 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
深入理解javascript中的this
Feb 08 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python列表计数及插入实例
2014/12/17 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
祖国在我心中演讲稿
2014/01/15 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
活动总结报告范文
2014/05/04 职场文书
档案工作汇报材料
2014/08/21 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
组织生活会发言材料
2014/12/15 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
工作收入证明模板
2015/06/12 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android