Помогите понять, как создать пирамиду из html-тегов с помощью цикла.
Как это сделать с числами я нашел.
for (let i = 1; i <= 9; i++) {
let str = ''; // каждый раз зачищаем строку
for (let j = 1; j <= i; j++) {
str += i;
}
document.write(str + '<br>');
}
А вот как это сделать так чтобы количество html-тегов <div class="flex-item color"></div>с каждой итерацией цикла увеличивалось понять не могу.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Example 2</title>
<style>
#game {
width: 1000px;
height: 1000px;
}
.flex-container {
display: flex;
}
.center {
justify-content: center;
}
.flex-item {
height: 100px;
width: 100px;
border: 1px solid white;
}
.color {
background-color: #9BC850;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
for (let i = 0; i < 3; i++) {
for (let l = 0; l < 1; l++) {}
document.getElementById('game').innerHTML += '<div id="block" class="flex-container center"><div class="flex-item color"></div></div>'
}
</script>
</body>
</html>
|
ShuShuShu, ты бы сделал ХТМЛ, который ты собираешься получить в итоге...
|
В итоге должно получится вот так.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Example 2</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="block" class="flex-container center">
<div class="flex-item color"></div>
</div>
<div id="block" class="flex-container center">
<div class="flex-item color"></div>
<div class="flex-item color"></div>
<div class="flex-item color"></div>
</div>
<div id="block" class="flex-container center">
<div class="flex-item color"></div>
<div class="flex-item color"></div>
<div class="flex-item color"></div>
<div class="flex-item color"></div>
<div class="flex-item color"></div>
</div>
</body>
</html>
|
Цитата:
ИД должно быть уникальным на странице. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
div {
min-height: 10px;
border: 1px solid;
margin: 10px;
}
</style>
<script>
</script>
</head>
<body>
<script>
for (let i = 0; i < 3; i++) {
const container = document.getElementsByTagName('body')[0]
let ln = document.createElement('div')
ln.classList.add('flex-container')
ln.classList.add('center')
const max = i * 2 + 1
for (let j = 0; j < max; j++) {
let o = document.createElement('div')
o.classList.add('flex-item')
o.classList.add('color')
ln.appendChild(o)
}
container.appendChild(ln)
}
</script>
</body>
</html>
|
Спасибо большое! Кажется немного разобрался и понял информацию по каким темам мне нужно читать. Спасибо.:thanks:
|
| Часовой пояс GMT +3, время: 14:11. |