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 相关文章推荐
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
基于Vue插入视频的2种方法小结
Apr 02 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获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php异常处理方法实例汇总
2015/06/24 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
django2 快速安装指南分享
2018/01/05 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
教堂婚礼主持词
2014/03/14 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
怎样写离婚协议书
2015/01/26 职场文书
一行Python命令实现批量加水印
2022/04/07 Python