Question

您好我试图将一个img插入div中，每次我的img都有不同的属性。我的Html代码将有一个带有名为ID_DIV的示例ID的div。我将在html代码中有一个样式部分，就像这个img position absolute。

我会根据div中需要的img数量预设变量 NumberOfTimes 。

但我无法设法让循环工作。每当我刷新浏览器时，我的img出现在不同的位置，但它不会出现＆＃34; NumberOfTImes ＆＃34;倍。我把我的代码编辑成了这个。但是循环无论如何都不会起作用。仍然不知道它是什么。

  function generateImg(){
  var numberOfTimes=prompt("how many times?");
  var div_id1=document.getElementById("div_id1");
  do{
    var oImg=document.createElement("img"); // Creates an oimg node
    oImg.setAttribute('src', 's0me_s0urce'); // sets the source for img file
    div_id1.appendChild(oImg); // append the img to #id Div.         
    document.querySelector('img').style.top = Math.floor(Math.random()*401)+'px';
    document.querySelector('img').style.left = Math.floor(Math.random()*401)+'px';
    numberOfTimes--;
 }while(numberOfTimes>0);
}

请帮助。我无法找到这个逻辑中的错误。

Answer 1

我的答案现在已经过时了。无论如何，这是一种处理重叠图像的方法：

var img, i, x, y;
var size = 48, w = 5, h = 3;
var grid = new Array(w * h).map(x => false);
var n = 5; // n > grid.length => infinite loop
var src = 'https://i.stack.imgur.com/6gwfY.gif?s=48&g=1';
var ct = document.getElementById('ct');

ct.style.width = size * w + 'px';
ct.style.height = size * h + 'px';

while (n-- > 0) {
  i = next(), x = i % w, y = (i - x) / w;
  img = document.createElement('img');
  img.setAttribute('src', src);
  img.style.left = size * x + 'px';
  img.style.top = size * y + 'px';
  ct.appendChild(img);
}

function next () {
  var l = grid.length;
  var i = Math.floor(Math.random() * l);
  // as long as this position is not free, try the next one
  while (grid[i]) i = (i + 1) % l;
  return grid[i] = true, i;
}

img{position:absolute}
#ct{background:#eee}
#ct{position:relative}

<div id="ct"></div>

Answer 2

你需要在循环之外声明“i”，否则它将不会减少，并且只会是“NumberOfTimes - 1”，因此你的循环将循环重复，并且图像位于同一位置。这也假设“NumberOfTimes”与第一个使用的范围相同。请注意，我移动了“i”的位置，并在循环中添加了一个减量。

function RandomPositionImgs(){
var i=NumberOfTimes;
  do{
    var oImg=document.createElement("img"); // Creates an oimg node
    oImg.setAttribute('src', 'some_source'); // sets the source for img file
    document.getElementById("ID_DIV").appendChild(oImg); // append the img to leftSide Div.
    document.querySelector('img').style.top = Math.floor(Math.random()*401)+'px'; // random positioning 
    document.querySelector('img').style.left = Math.floor(Math.random()*401)+'px'; // random positioning
    i--;
 }while(i>0);
}

Answer 3

谢谢大家的答案，让我意识到我做错了什么。这是我在你的评论后做的正确代码，它的工作完美。

 function generateImgs(){
  var numberOfTimes=prompt("how many times?");
  for(i=0;i<numberOfFaces;i++){
    var oImg=document.createElement("img"); // Creates an oimg node
    oImg.setAttribute('src', 'valid source'); // sets the source for img file
    document.getElementById("div id").appendChild(oImg); // append the img to  Div.
    oImg.style.top = Math.floor(Math.random()*401)+'px';
    oImg.style.left = Math.floor(Math.random()*401)+'px';
 }
}

javascript - 如何使用循环

3 个答案: