复制图像

问题描述：

所以我一直在复制图像有一些麻烦......例如，我想复制3个独特的图片，但只有一个出来。如果你还可以帮助我在整个网页上使代码重复50次，并在达到50行图像时停止执行代码？在这里谢谢你的代码是复制图像

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>RSS Earth Map</title> 
 
<style> 
 
body { 
 
\t background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4"); 
 
} 
 
img { 
 
\t border: 0px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="cDunes"> 
 
\t <img src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"/> 
 
</div> 
 
<div id="eDunes"> 
 
\t <img src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"/> 
 
</div> 
 
<div id="forest> 
 
\t <img id="forest src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"/> 
 
</div> 
 
<div id="oasis"> 
 
\t <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"/> 
 
</div> 
 
<script> 
 
var choose = Math.floor((Math.random() * 2) + 1); 
 

 
function createCDunes() { 
 
var cDunes = document.getElementById("cDunes"); 
 
var cln = cDunes.cloneNode(true); 
 
document.body.appendChild(cln); 
 
} 
 
function createEDunes() { 
 
var eDunes = document.getElementById("eDunes"); 
 
var cln2 = eDunes.cloneNode(true); 
 
document.body.appendChild(cln2); 
 
} 
 
function createForest() { 
 
var oasis = document.getElementById("oasis"); 
 
var cln3 = oasis.cloneNode(true); 
 
document.body.appendChild(cln3); 
 
} 
 
for (var line=1; line<60; line++) { 
 
    for(var i=1;i<29;i++) { 
 
\t if(choose == 1) { 
 
\t createCDunes(); 
 
\t } else if (choose == 2){ 
 
\t createEDunes(); 
 
\t } else { 
 
\t createForest(); 
 
\t } 
 
    } 
 
} 
 
</script> 
 
</body> 
 
</html>

答

首先，你在这里失去了两个双引号所有的

<div id="forest> 
    <img id="forest src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"/> 
</div>

其次，choose随机变量被分配一次。您需要将其移动到循环内部：

for (var line = 1; line < 60; line++) { 
    for (var i = 1; i < 29; i++) { 
     var choose = Math.floor((Math.random() * 3)); 
     if (choose == 1) { 
      createCDunes(); 
     } else if (choose == 2) { 
      createEDunes(); 
     } else { 
      createForest(); 
     } 
    } 
}

另请注意我更改了随机方程。

以下是完整的片段：

function createCDunes() { 
 
    var cDunes = document.getElementById("cDunes"); 
 
    var cln = cDunes.cloneNode(true); 
 
    document.body.appendChild(cln); 
 
} 
 

 
function createEDunes() { 
 
    var eDunes = document.getElementById("eDunes"); 
 
    var cln2 = eDunes.cloneNode(true); 
 
    document.body.appendChild(cln2); 
 
} 
 

 
function createForest() { 
 
    var oasis = document.getElementById("oasis"); 
 
    var cln3 = oasis.cloneNode(true); 
 
    document.body.appendChild(cln3); 
 
} 
 
for (var line = 1; line < 60; line++) { 
 
    for (var i = 1; i < 29; i++) { 
 
    var choose = Math.floor((Math.random() * 3)); 
 
    if (choose == 1) { 
 
     createCDunes(); 
 
    } else if (choose == 2) { 
 
     createEDunes(); 
 
    } else { 
 
     createForest(); 
 
    } 
 
    } 
 
}

body { 
 
    background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4"); 
 
} 
 
img { 
 
    border: 0px; 
 
}

<body> 
 
    <div id="cDunes"> 
 
    <img src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy" /> 
 
    </div> 
 
    <div id="eDunes"> 
 
    <img src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf" /> 
 
    </div> 
 
    <div id="forest"> 
 
    <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy" /> 
 

 
    </div> 
 

 
    <div id="oasis"> 
 
    <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi" /> 
 
    </div>

有没有什么办法让图片从左到右？另外你如何获得图像合并？ –

使用，只需删除'divs'，并给予img自己相同的id。 –

相关推荐