При помощи вложенных циклов на js нарисовать счетчик цифр

Рейтинг: 0Ответов: 2Опубликовано: 11.03.2023

вот такая задачка, постарался выложить максимально понятно со своим вариантом ответа, но как сделать чтобы ответ был согласно условию задачи ни как не могу сообразить, подскажите пожалуйста начинающему,благодарю за помощь.

let out08 = document.querySelector('.out_08');
let button08 = document.querySelector('.b_08');

button08.onclick = () => {
  out08.innerHTML = '';
  for (let i = 1; i <= 5; i++) {
    out08.innerHTML += '<br>';
    for (let k = 1; k <= i; k++) {
      out08.innerHTML += k + ' ';
    }
  }
}
<section>
  <p>task-08</p>
  <p>
    С помощью вложенных циклов нарисуйте, цифры - из счетчиков цикла:
    <pre>
        1<br>
      2 1<br>
    3 2 1<br>
  4 3 2 1<br>
5 4 3 2 1
    </pre>
  </p>
  <div class="out_08"></div>
  <button class="button-primary b_08">task-08</button>
</section>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят
  1. Установите шрифт monospace
  2. Добавьте двойной перенос строки.
  3. Добавьте цикл для форматирования вывода при помощи неразрывных пробелов (по убыванию)
  4. Выводите цифры также по убыванию от i до 0

let out08 = document.querySelector('.out_08');
let button08 = document.querySelector('.b_08');

button08.onclick = () => {
  out08.style.fontFamily = 'monospace';

  out08.innerHTML = '<pre>\n';
  for (let i = 1; i <= 5; i++) {
    out08.innerHTML += '<br/>\n<br/>\n';
    for (let k = 5 - i; k > 0; k--) {
      out08.innerHTML += '&nbsp;&nbsp;';
    }
    for (let k = i; k > 0; k--) {
      out08.innerHTML += '&nbsp;' + k;
    }
  }
  out08.innerHTML += '</pre>';
}
<section>
  <p>task-08</p>
  <p>
    С помощью вложенных циклов нарисуйте, цифры - из счетчиков цикла:
    <pre>
        1<br>
      2 1<br>
    3 2 1<br>
  4 3 2 1<br>
5 4 3 2 1
    </pre>
  </p>
  <div class="out_08"></div>
  <button class="button-primary b_08">task-08</button>
</section>

▲ 0

Можно вот так. Тут мы сначала создаём результат и записываем в переменную, а потом выводим в html. Только не забудь выводить результат в тег pre, чтобы сохранить пробелы

let result = ""
const max = 5
for (let i = 1; i <= max; i++) { 
  line = ""
  for (let k = i; k >= 1; k--) { 
    line += k
  }
  result += " ".repeat(max - i) + line + "</br>"
}

const pre = document.querySelector("#pre")
pre.innerHTML = result

Если нужно выводить именно в цикле, то так

const pre = document.querySelector("#pre")

const max = 5
for (let i = 1; i <= max; i++) { 
  let line = ""
  for (let k = i; k >= 1; k--) { 
    line += k
  }
  pre.innerHTML += " ".repeat(max - i) + line + "</br>"
}