gpt4 book ai didi

Javascript 平铺 map 生成器

转载 作者:行者123 更新时间:2023-12-01 02:21:17 27 4
gpt4 key购买 nike

我想用一张图片来编写一个平铺 map 。它应该是一个 5x5 的小图片区域。我写了一些带有 2 个嵌套循环的 Javascript 代码。使用此解决方案,仅打印 1 张图片。当我在第二个循环中删除 br 标签时,会打印 5 张图片,但只是连续打印,而不是在它们之间打印。有什么问题?我怎样才能意识到这一点?

window.onload=function() {
document.getElementById('button_generateField').addEventListener('click', function generateField (spacefields) {

for (var i = 0; i <= 4; i++) {

var horizontal_field = new Image();
horizontal_field.src = 'Grafiken/spacefields.jpg';
document.body.appendChild(horizontal_field);


for (var j = 0; j <= 4; j++){

var vertical_field = new Image();
vertical_field.src = '/Grafiken/spacefieldsd.jpg';
document.body.appendChild( '<br>' + vertical_field);

};


};

});}

HTML

<!DOCTYPE HTML>
<html lang="de">

<head>
<meta charset="utf-8">
<title>Test</title>

<style type="text/css">

</head>
<body>
<div id="header">
<img src="testbanner1.jpg" alt="banner" width="1500" height="150px" >
</div>

<div id="main">

<button id="button_generateField">Generate Field!</button>

</div>

</body>
</html>

最佳答案

/Grafiken/spacefieldsd.jpg看起来像一个错字。使用document.createElement("img")而不是new Image() 。你的<br>不起作用,你需要 document.createElement("br")

var btn = document.getElementById("button_generateField");
var div = document.getElementById("main");

var rows = 4;
var cols = 4;
var x = 0;
var y = 0;
btn.addEventListener("click", function(){
for(y=0;y<rows;y++){

for(x=0;x<cols;x++){
var img = document.createElement("img");
img.src = "https://via.placeholder.com/100x100";
img.onload = function(){



}
div.appendChild(img);
}
div.appendChild(document.createElement("br"));

}
});
<button id="button_generateField">Generate Field!</button>
<div id="main">

</div>

关于Javascript 平铺 map 生成器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49201824/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com