复制图像

时间:2016-12-10 10:39:52

标签: javascript html css

所以我在复制图像时遇到了一些麻烦...例如我想要复制3张独特的图片,但只有一张图片出来了。如果您还可以帮助我在网页上复制代码50并使其在达到50行图像时停止?谢谢,这里是代码

<!DOCTYPE html>
<html>
<head>
<title>RSS Earth Map</title>
<style>
body {
	background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4");
}
img {
	border: 0px;
}
</style>
</head>
<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>
<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++) {
	if(choose == 1) {
	createCDunes();
	} else if (choose == 2){
	createEDunes();
	} else {
	createForest();
	}
  }
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

首先,你在这里错过了两个双引号

<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();
        }
    }
}

还注意到我稍微改变了随机方程式。

以下是完整代码段:

&#13;
&#13;
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();
    }
  }
}
&#13;
body {
  background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4");
}
img {
  border: 0px;
}
&#13;
<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>
&#13;
&#13;
&#13;