讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

JS操作CSS随机改变网页背景实现思路_javascript技巧

php中文网
发布： 2016-05-16 16:56:01
原创
1550人浏览过

今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然我的回答是可以的。具体可以这样做：
1、用JS定义一个图片数组，里面存放你想要随机展示的图片

Content at Scale
Content at Scale

SEO长内容自动化创作平台

Content at Scale 154
查看详情 Content at Scale
复制代码 代码如下:

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设置随机背景的。
复制代码 代码如下:



大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：防止按钮在短时间内被多次点击的方法_javascript技巧 下一篇：使用js操作css实现js改变背景图片示例_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript中FetchAPI如何使用_与Ajax区别 Fetch是JavaScript发起网络请求的现代标准，基于Promise、语法简洁，但需手动处理HTTP错误和Cookie；它不是Ajax的替代品，而是其思想在新标准下的升级实现。
2025-12-20 21:08:02
343
JavaScript如何实现数据可视化？ JavaScript数据可视化核心是选用成熟图表库（如Chart.js、D3.js、ECharts、Plotly.js）将规范数据渲染为图形，需准备结构化数据、配置选项、嵌入网页，并注意响应式、交互及数据校验。
2025-12-20 21:04:02
805
什么是javascript标签模板字面量_它如何增强字符串处理？ 标签模板字面量是JavaScript中通过标签函数处理模板字符串的特性，支持XSS防护、DSL构建、嵌套逻辑及原始字符串访问，实现字符串操作的可编程化与解耦。
2025-12-20 21:04:02
661
javascript模块是什么_如何导入和导出功能？ JavaScript模块是ES6引入的原生代码复用机制，通过export导出、import导入实现作用域隔离与严格模式执行；支持命名导出、默认导出、统一导出及动态导入import()。
2025-12-20 21:03:07
550
javascript的音频处理怎么做_如何实现可视化效果 JavaScript音频可视化依赖WebAudioAPI（AnalyserNode获取频率/波形数据）和CanvasAPI实时绘制，支持音频文件、网页音频元素及麦克风输入，配合对数分组、滤波平滑等技巧提升真实感。
2025-12-20 21:02:02
334
javascript如何实现复制粘贴_clipboard API有哪些使用限制 JavaScript复制粘贴需用navigator.clipboardAPI，须在用户手势触发的HTTPS安全上下文中调用，读取非文本内容需权限检查，低版本浏览器需降级兼容。
2025-12-20 20:59:59
639
javascript Node.js是什么_如何用javascript编写服务器代码？ Node.js是基于V8引擎的服务器端运行时环境，采用事件驱动、非阻塞I/O模型，适合高并发场景；可用原生http模块或Express快速搭建Web服务，并需正确处理req/res对象。
2025-12-20 20:58:35
680
javascript的map和set是什么_它们与对象有何区别？ Map和Set是ES6引入的原生数据结构：Set存储唯一值，支持任意类型去重；Map存储键值对，键可为任意类型且保持插入顺序，二者均非Object或Array的语法糖。
2025-12-20 20:52:02
205
javascript的TypeScript是什么_它为何是JavaScript的超集？ TypeScript是JavaScript的超集，因其完全兼容JS语法并额外支持接口、泛型等类型特性；.js文件可直接重命名为.ts，编译后输出纯JS，类型信息被擦除，仅在开发阶段提供类型检查与重构保障。
2025-12-20 20:50:02
565
如何排序数组_javascript中sort方法怎么用？ JavaScript中sort()默认按Unicode码点字符串排序，数字数组需传入比较函数：升序用a-b，降序用b-a，对象按属性排序需自定义逻辑，中文等国际化文本应使用localeCompare。
2025-12-20 20:49:02
411
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部