个人中心
gpt4 book ai didi

Javascript/Dom 将图像加载到网格中

转载 作者：行者123 更新时间：2023-11-28 02:48:12 24 4
gpt4 key购买 nike

我对编程和 javascript/dom 还很陌生。最终，我试图制作一个滑动益智游戏，但首先，我只是试图以随机顺序加载图像。这将是一个 4x4 的图像网格。这些图像被命名为 Tree00、01、02、03、10 等，最多 33 个。到目前为止，这是我的代码:

        <html>
<head>
<title>Shuffle</title>
</head>
<body>

<script language="JavaScript">
<!--
Pics = new Array();
var Top = 16;

for(i = 0; i < Top; i++) {
  document.write("<img><img><img><img><br>");
}

function RandomInt(Min, Max) {
  RI = Math.floor(Math.random() * (Max - Min + 1)) + Min;
  return(RI);
}

function Shuffle() {
  N = RandomInt(0, 1);
  this.Image.src=Pics[N];
  this.Image.style.left = 220;


}

function ViewerObj(Image, Pics, i) {
  this.Image = Image;
  this.Image.style.left = 800;
  this.Pics = Pics;
  this.Shuffle = Shuffle;
  this.Image.id = "ID" + i;
}

function Randomise() {
  var i;

  for(i = 0; i < Top; i++) {
    Viewers[i].Shuffle();
    Viewers[i].Image.style.left = 200;
  }
}

Viewers = new Array();
var i;

for(i = 0; i < 3; i++) {
  Pics[i] = "images/Tree" + (i) + (i + 1) + ".jpg";  
}

for(i = 0; i < Top; i++) {
  document.images[i].src = "images/Blank.jpg";
  document.images[i].style.left = 300;
  Viewers[i] = new ViewerObj(document.images[i], Pics, i);
}


//-->
</script>
<h1>Shuffle</h1>
  <form>
    <input type="button" value="Shuffle" onClick="Randomise();"/>
  </form>
</body>
</html>

我只是不太明白我需要改变什么以及我该如何去做。任何帮助+解释将不胜感激。我想要实现的目标是加载每个图像，但只是以随机顺序加载，但不重复。

最佳答案

以下是您的脚本中的一些问题:

首先替换

for(i = 0; i < Top; i++) {
  document.write("<img><img><img><img><br>");
}

由

for(i = 0; i < Top; i++) {
 document.write("<img>");
 if ((i+1)%4 == 0) {
  document.write("<br>");
 }
}

您在代码中只会得到 16 个 IMG 元素，而不是 4*16

那么您将需要为图像提供 16 个不同的名称:替换

for(i = 0; i < 3; i++) {
 Pics[i] = "images/Tree" + (i) + (i + 1) + ".jpg";  
}

由

for(var i = 0; i < 4; i++) {
for(var j = 0; j < 4; j++) {
 Pics[j+4*i] = "images/Tree" + (i) + (j) + ".jpg";  
}
}

那么你最大的问题就是洗牌。您不能将“查看者”一一打乱，因为您想避免重复。每个观看者必须随机选择一张唯一的图像。

为此，您可以使用 mdarwi 答案中的技术:例如，随机播放图片表。

在 jsbin 上检查修改后的代码 here

关于Javascript/Dom 将图像加载到网格中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4424308/

24 4 0
文章推荐： javascript - 在 jQuery ajax 函数中使用 jQuery 插件的范围问题
文章推荐： javascript - jQuery live() 在 Firefox 中不显示文本光标
文章推荐： php - 对 和 脚本使用 headScript View 助手
文章推荐： php - 从javascript数组到mysql
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com