首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在JS中不重复显示随机多张图片?

在JS中实现不重复显示随机多张图片的方法有多种,以下是一种常见的实现方式:

  1. 首先,准备一个包含所有图片路径的数组,例如:
代码语言:txt
复制
var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // 其他图片路径
];
  1. 创建一个用于存储已显示过的图片的数组,例如:
代码语言:txt
复制
var displayedImages = [];
  1. 创建一个函数来获取随机图片并显示,例如:
代码语言:txt
复制
function getRandomImage() {
  // 如果所有图片都已经显示过,则重新开始
  if (displayedImages.length === images.length) {
    displayedImages = [];
  }

  var randomIndex;
  var image;

  // 循环直到找到一个未显示过的图片
  do {
    randomIndex = Math.floor(Math.random() * images.length);
    image = images[randomIndex];
  } while (displayedImages.includes(image));

  // 将图片添加到已显示过的数组中
  displayedImages.push(image);

  // 在页面中显示图片
  var imgElement = document.createElement('img');
  imgElement.src = image;
  document.body.appendChild(imgElement);
}
  1. 调用函数来显示随机图片,例如:
代码语言:txt
复制
getRandomImage();

每次调用 getRandomImage() 函数时,它会从图片数组中随机选择一张未显示过的图片,并将其显示在页面中。当所有图片都显示过一次后,它会重新开始显示。

这是一个简单的实现方法,你可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端性能优化-减少HTTP请求数

1、图片地图 图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置。 1) 优点: 把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数。...2) 使用条件: 只有在图片的所有组成部分在页面是紧挨在一起时才能使用,导航栏。 3) 缺点: 确定图片的坐标比较繁琐且易出错,同时使用图片地图导航也不具有可读性,因此推荐使用图片地图。...,通过指定CSS的backgroud-image和backgroud-position来显示元素。...4、使用外部JS和CSS文件 在用户不带缓存访问页面的时候,内联所有的js和css的效率更快,原因是外置js和css带来额外的http请求开销,1个http请求相对于3个http请求要更快一些。...其实,使用外部JS和CSS文件会产生更快的访问速度,这是由于外部JS和CSS文件能被浏览器缓存,当下次再请求相同的JS和CSS时,浏览器将不会再发出HTTP请求,而是使用缓存的JS和CSS文件,减少了HTTP

52930

百度搜索结果带图片如何实现

4、图片链接不要写在JS里,不要使用异步加载等方式进行展现,现阶段百度对JS的解析成功率还有待提升。...百度图片搜索当然希望用户看到相关图片后,满怀希望地点击网页地址换来的却是长久无尽的等待。 三,图片自身维度 1、图片尽量清晰。...方式二:随机抓取 第一步:需要在页面布置多张小图,建议使用12175或200133(百度站长规格),便于蜘蛛抓取。 第二步:大量友链。一般30-40条友链必出图(其他站长亲测)。...方式二不同于方式一,是为了能出图片而做图片,但是结果不能把控,出图是随机的,看你页面有什么图就切随机抓取一张,能出哪张图片谁也不知道。不过这些对于个人站点来说影响不大。...在一般的实际操作,首页能展示能显示LOGO,而内链和内页能抓取主图或产品首图是最理想的效果。

89830

zblogPHP万能型主题模板希望(Hopelee)全新绽放,独具热爱,自成一派

主题自带三个侧栏模块,分别是热门、热评和随机显示侧栏,设置在主题配置,全局配置设置热门时间及调用文章数量。...-- 优化搜索页面功能,重写摘要代码,增加搜索关键词及高亮显示功能。 -- 优化首页轮播图片尺寸,固定比例显示,不再拘于固定图片尺寸。 -- 优化移动端部分模块功能间距统一的问题。...-- 增加缩略图随机显示图片数量,设置方法: 主题设置-功能设置-缩略图随机图片 默认随机图片9张,(更新主题之后接口为空,可以设置9或者更大数字)默认随机图片9张,想要设置更多直接添加图片数量,例如20...-- 新增列表在文章无图时显示随机图片的功能,功能设置-无图显示随机,开启。 -- 优化列表摘要调用接口,可选择直接调用正文,文章设置-摘要调用正文,开启。...-- 优化页面重构代码及自适应显示代码。 -- 增加独立注册链接接口,主题设置添加。 -- 优化繁简转换js代码。 -- 优化主题授权功能代码,优化加密代码。

2.1K30

页面有点卡,你知道原因和解决方案吗?

2 解决方案 ①减少http请求次数,可以通过如下方式: ②图片地图:把多张图片整合到一张图片中,以位置定位超链接。...CSS Sprites合并图片,通过指定CSS的backgroud-image和backgroud-position来显示元素。 ③合并JS脚本和CSS样式表。 ④使用外部JS和CSS文件。...2 解决方案 对HTTP传输进行压缩,主要通过以下方式: 即在js,css、图片等资源已经压缩的基础上,在HTTP传输过程的再次压缩。...四 原因四 1 原因 CSS、JavaScript、图片等需要重复加载。 2 解决方案 静态资源统一放在一个静态域名上,减轻重复下载静态资源的负担。...④通过使用不同的domain减少cookie的使用:cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器,但在访问一些资源,js,css和图片时,大多数情况下cookie是多余的,可以使用不同的

88710

每天10个前端小知识 【Day 14】

元素的外部显示类型将决定该元素在流式布局的表现(块级或内联元素); 元素的内部显示类型可以控制其子元素的布局(例如:flow layout,grid 或 flex)。...是什么 CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件,再利用CSS的“background-image”,“background- repeat”,“background-position...优点 其优点在于: 减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; 减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和; 减少了命名困扰...; 性能上 使用visibility:hidden比display:none性能上要好,display:none切换显示时,页面产生回流(当页面的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建...所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。 9. CSS的 “flex:1;” 是什么意思?

10410

Android富文本开发

结束后,光标移到插入图片中的最后一行显示; 编辑状态图片点击暴露点击事件接口,可以在4个边角位置动态设置一个删除图片的功能,点击删除按钮则删除图片; 连续插入多张图片时,比如顺序1,2,3,注意避免出现图片插入顺序混乱的问题...(异步插入多张图片可能出现顺序错乱问题); 在编辑富文本状态的时候,连续多张图片之间插入输入框,方便在图片间输入文本内容; 在编辑状态,可以设置文字大小和颜色,同时做好拓展需求,后期可能添加文本加粗,...如何在ViewGroup添加view,删除view时给相应view和受影响的其他view添加动画,不太容易做。...注意这种方法的实现,需要深入研究js,css等,必须非常熟悉才可以用到实际开发,可以当作学习一下。这种方式对于图片显示和上传,相比原生要麻烦一些。...14.点击图片可以查看大图 编辑状态时,由于图片有空能比较大,在显示在富文本的时候,会裁剪局显示,也就是图片显示不全。

8.4K20

Android短视频系统开发技巧:给Button的点击上色

在短视频系统开发的UI设计,按钮一般都会有多个状态,比如:聚焦、点击等,不同的状态必须显示不同的呈现形式(比如颜色、形状的改变),这样用户才能感觉到按钮被成功选中、点击了,否则用户体验就会非常差了。...如图所示: 但是,如果想为短视频系统开发Button添加自定义的图片背景,: android:background="@drawable/upload" 那么,当你点击Button的时候会发现,...下面,我将介绍两种在Button被点击时改变背景的方式,一种是采用多张背景图片切换的方式,另一种是采用shape来定义Button状态切换的背景显示。...多张背景图片切换 首先,为短视频系统开发Button准备两张背景图片,一张是Button未点击时显示图片,另一张是Button被点击时显示图片,如图所示: 然后,在工程的res/drawable目录下创建一个...这种方法是比较直观简单的方法,在实际的工程也大量使用,但也有一个缺陷,必须为所有的Button准备多张背景图片,为每一个状态准备一张,加大了短视频系统开发UI设计的工作量,也加大了程序的大小。

1.2K10

Butterfly安装文档(三)主题配置-1

如果希望显示图标,图标名可不写。 默认子目录是展开的,如果你想要隐藏,在子目录里添加 hide 。...top_img 以上所有的 top_img 可配置以下值 3.2.0 以下版本的配置只支持 留空,true 和 false - 显示默认的顔色 img链接 - 显示所配置的图片 tag_per_img...both # 当没有设置cover时,默认的封面显示 default_cover: 当配置多张图片时,会随机选择一张作为cover.此时写法应为 default_cover: - https...图片描述 可开启图片Figcaption描述文字显示 优先显示图片的 title 属性,然后是 alt 属性 photofigcaption: true 复制相关配置 可配置网站是否可以复制、复制的内容是否添加版权信息...否则,以主题配置文件的配置为准 相关文章 当文章封面设置为 false 时,或者没有获取到封面配置,相关文章背景将会显示主题色。

42560

推荐几款好用的IDEA插件,一定不要错过!

一.EasyCode介绍:基于IntelliJ IDEA开发的代码生成插件,支持自定义任意模板(Java,html,js,xml)。只要是与数据库相关的代码都可以通过自定义模板来生成。...支持同时生成生成多张表的代码。每张表有独立的配置信息。完全的个性化定义,规则由你设置。使用方法:首先在file->settings->plugins->macketplace安装好EasyCode。?...image-20220127090732085通过使用easycode,可以大大节省程序员在这些简单重复操作上耗费的时间,使其更多的关注在业务和架构的实现,有利于软件的快速开发。...@Data: 注解在类,生成setter/getter、equals、canEqual、hashCode、toString方法,为final属性,则不会为该属性生成setter方法。...需要提前配置随机文件夹路径,可以选择随机时间,这里我选择的是300min,如下图:?image-20220125131236320然后在View下选择随机背景图片,即可展示文件夹内预存的图片为背景:?

2.1K20

WordPress主题Siren二开美化版

功能介绍 背景图API 网页背景图、文章列表、文章顶部特色图,均支持随机图片API,并使用 MD5 8 位随机数载入,大几率减少重复图片的现象; 网页背景图显示顺序: 默认显示主题自带随机图,如果填写...注意: 不支持调用动态 URL 的随机图 API ,仅支持伪静态 URL ,因为本主题会在 URL 结尾添加动态随机数以防止随机重复。...注意事项 使用友链页面需要在链接中新建分类,并且把链接放到分类里面才能显示链接。 比如说某个分类可以用于显示崩坏掉的却暂时撤销的友链 ~ 美图欣赏: ? ? ? ? ?...微信推送 添加图片放大功能,在文章页设置开启 修正 卡片式风格 在没有正文内容时的显示效果 2018.03.21 尝试修复评论表情框在某些主机无法加载的问题 2018.04.07 新增一个 “高斯模糊...、缩略图、正文中多余的图片标签元素 全局字体使用“微软正黑体”,更具逼格 整理了一个博主万年没有发现的东西 —— 主题居然自带(BAGUETTEBOX.JS图片灯箱,只是使用条件苛刻,添加图片时需要把文件

3.9K30

实战|如何使用云开发实现照片附件上传开发

返回的字段,contents表示所选的图片的二进制Buffer列表 max-count 图片上传的个数限制 在当前页面的.js编写 wx.cloud.init({ env: '环境ID',...,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片...}) }, previewImage: function(e){ wx.previewImage({ current: e.currentTarget.id, // 当前显示图片的...3.根据页面中提供的访问地址访问页面登陆后,创建新的项目(这里以花园假期为例) 4.我们在内容模型创建照片上传管理(这里模拟情况为仅需要用户上传和记录用户id) 创建内容模型 如果需要用户上传多张照片...,在设置照片字段时候需要勾选允许用户上传多张照片!

1.3K30

新浪微博项目笔记

在重写set模型的方法设置各个视图属性的大小、位置。...在子单元格利用传递过来的视图模型设置数据和各个子控件的大小     用来解决比较复杂的界面,而且界面的控件尺寸是由模型数据确定的。     ...视图模型:模型+所有控件的frame     好处:如果一个控件循环利用(:cell)就可以避免重复计算控件的尺寸 4.时间label宽度、来源     set方法、get方法 5.配图     ...UIImageView的内容模式:     1.填充整个控件     2.按比例缩放,并且不会超出控件     3.按比例缩放,直到有宽和高有一个超出边界,然后显示中心点,并且要多图片进行裁剪...    4.不会缩放图片,只会把图片的中心点对齐图片 6.发送图片     上传多张图片?

62510

直播APP的性能优化-礼物篇

5、Q:小礼物的连击数字是[0-9]的文字图片组成的,每次显示都需要拼接图片,如何优化?...可以使用NSCache,步骤如下: 1、加载cache图片; 如果有则返回,没有到步骤2; 2、加载本地的缓存文件,如果有则返回,没有到步骤3; 3、从网络下载图片,到步骤4; 4、存入本地的缓存文件...A:可以把多张图片放到一张图片,加载后通过-CGImageCreateWithImageInRect切割出多张图片; 内存优化 1、Q:直播的时候送出一个豪华礼物,为何内存会增加20M?...A:先查看加载方式,+imageNamed:的方式会添加缓存,但使用完释放;+imageWithContentsOfFile:的方式不会添加缓存,重复使用会占用多次内存,但使用完会回收; 其次,通过...这些QA都是优化过程的一些问题和解决方案,如果有建议和疑问欢迎交流。

1.9K60

HTML5新特性

如何定制表单2.0的错误提示消息内容 HTML5为每个标签对应的JS对象添加了新属性,以标识用户输入的有效性: input.validity { // 无效的输入,email输入无效...badInput:false, // 类型匹配,number中出现字符 typeMismatch:false, // 值缺失,required验证失败 valueMissing:false...补充:Canvans上如何按照特定的顺序绘制图片 Canvas绘图中若需要多张图片,他们的加载都是异步的,无法预测哪一张先加载完成!...如何在服务器端下载的网页显示客户端的图片?...一般情况下,网页只能显示服务器上的图片,HTML5,可以实现用户拖拽一张本地的图片显示在服务器端下载的网页 HTML中提供的用于文件输入输出(I/O)对象: File:代表一个文件/目录对象 FileList

7.6K30

网站性能优化(一)减少HTTP请求数量

图片:雪碧图,图标字体文件,data:url 优化图片有很多方式,除了压缩,最常见得就是雪碧图,即把多张图片合并为一张图,利用CSS -background-position调整图片显示位置。...data:url模式可以在页面渲染图片但无需额外的HTTP请求,格式如下: 这个的缺点是,如果一张图片在多个页面被用到...注意:移动端建议用src="data:image...",性能非常不好。 2. 合并JS和CSS文件 这个是最常用的做法。...利用项目构建工具,gulp, grunt, webpack等等,都可以做到JS或者CSS文件的压缩,合并。只不过,合并后文件大小如何,需要斟酌而定。...比如,通常我们建议将共有图片,第三方JS插件库或者CSS放到CDN(内容发布网络)上,不仅仅因为CDN的分布式特性可以加快资源文件下载速度,而且,一般CDN服务器都做了缓存配置,可以充分浏览器缓存。

1K30

积木报表·JimuReport 1.3.64 版本发布,免费的企业级可视化报表工具

分组报表功能重构,支持分组内小计,支持设置分组字段排序、动态补数据等 新版导出pdf功能重构,支持表达式、字体样式、背景、套打、交叉表头 字典表名改成jimu_*前缀,与系统表区分 超链接颜色跟随字体颜色走 设置默认蓝色...导出excel支持api方式调用 循环块重复设定bug修复 动态循环表头如果list为空会出现空指针的问题 横向分组后台报错 api超时提示、select * 多个字段引起报错,页面显示的是表名不存在...) 钻取新窗口不显示下一页 严重:模板里面设置的行高,预览时,恢复成默认高度了 主子报表有字典值没有翻译,导致子表查询不出来 Issues处理 导出excel时,图片未导出 #230 积木报表不支持MYSQL...请求超时 #319 合并两行表格,打印数据显示有问题 #298 预览和设计加载外网js ,加载慢 #316 【bug】交叉报表导出报错问题 #339 报表连接600多张表的SQL Server,后编辑...│ │ ├─仪盘表 │ │ ├─字浮云 │ │ ├─表格 │ │ ├─选项卡 │ │ ├─万能组件 └─其他模块 └─更多功能开发。。

1.2K20

『教程』微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage...的刷新问题 ......微信小程序图片选择、上传到服务器、预览(PHP) 微信小程序js的全局调用,图片宽高自适应 canvasdrawImage理解,image图片自适应宽度比例显示的方法 微信小程序图片拖拽 微信小程序1028...自定义swiper面板指示点的样式,image图片自适应宽度比例显示 在微信小程序里实现图片预加载组件 微信小程序图片轮播功能简介 ifanr:微信小程序实现手势缩放图片 微信小程序仿IOS tableview...问答精选《二十六》点击button重新请求数据,安卓多张图片上传 ... 官方问答精选《十九》带参数二维码,返回数据如何保存为图片 ...

6.4K100
领券