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拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
javascript不可用的问题探究
Oct 01 Javascript
json的使用小结
Jun 08 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 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下常用正则表达式整理
2010/10/26 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
JS实现图片切换效果
2018/11/17 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python编写的最短路径算法
2015/03/25 Python
PyCharm代码格式调整方法
2018/05/23 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
大学生职业生涯规划书汇总
2014/03/20 职场文书
学校就业推荐信范文
2014/05/19 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
初三语文教学计划
2015/01/22 职场文书
新员工试用期自我评价
2015/03/10 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Python利用zhdate模块实现农历日期处理
2022/03/31 Python