javascript - 复制图像

标签 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>

最佳答案

首先,你在这里遗漏了两个双引号

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

其次,选择 随机变量被赋值一次。您需要将其移动到循环内才能:

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>

关于javascript - 复制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41074587/

相关文章:

javascript - Slick.js 删除图像周围的蓝色突出显示

javascript - AJAX 不发送变量写入 txt

javascript - 我怎样才能从中获得特定的 key ?

javascript - 检查输入并将其转换为适当的类型以防止 XSS

javascript - 为什么使用 JS 更改此 CSS 效果仅适用于某些值?

html - 如何修复悬停未激活

javascript - ace 编辑器 - 移动到行尾

javascript - JQuery - 执行 "find()"排除某些元素及其后代

html - 悬停时将一个 block 移动到另一个 block 上

html - 如何居中固定的垂直导航 css?