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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
关于vue面试题汇总
Mar 20 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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批量生成缩略图的代码
2008/07/19 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python单元测试与测试用例简析
2019/11/09 Python
Django异步任务线程池实现原理
2019/12/17 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
大学生入党自我鉴定
2013/10/31 职场文书
单位领导证婚词
2014/01/14 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
驻村工作简报
2015/07/20 职场文书