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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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
3
2006/10/09 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
js实现tab切换效果
2017/02/16 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
机电专业求职信
2014/06/14 职场文书
中层干部培训方案
2014/06/16 职场文书
个人作风建设总结
2014/10/23 职场文书
工厂见习报告范文
2014/10/31 职场文书
2015年教学工作总结
2015/04/02 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL