БЛОГ НА HUSL


сделать в массиве числа по порядку как на картинке

Автор вопроса: Dan

введите сюда описание изображения

отсортировать массив

var array = [6, 2, 3, 1, 7, 4, 8, 5]

function DrawArray() {
    var wrapper = $(".blocks-wrapper");
    wrapper.html('');
    array.forEach(element => {
        wrapper.append(`<div class="block" id="block-${element}">${element}</div>`);
    });
    wrapper.addClass('reDrawed');

    setTimeout(() => {
        wrapper.removeClass('reDrawed');
    },1000)
}
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400&display=swap');

:root{
    --color-1:hsla(0  , 100%, 45%, 0.7);
    --color-2:hsla(60 , 100%, 45%, 0.7);
    --color-3:hsla(90 , 100%, 45%, 0.7);
    --color-4:hsla(135, 100%, 45%, 0.7);
    --color-5:hsla(180, 100%, 45%, 0.7);
    --color-6:hsla(225, 100%, 45%, 0.7);
    --color-7:hsla(270, 100%, 45%, 0.7);
    --color-8:hsla(315, 100%, 45%, 0.7);
}

*{
    box-sizing: border-box;
}

html{
    font-size: 20px;
    font-family: 'Anek Latin', sans-serif;
}

.container{
    width: 100%;
    padding: 15px;
}
.blocks-wrapper{
    max-width: 450px;
    display: flex;
    flex-wrap: wrap;
    
}
.block{
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    margin: 10px;
    padding: 5px;

    transition: all 0.3s;
    animation-name: arrAnim;
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#block-1 {background-color: var(--color-1);}
#block-2 {background-color: var(--color-2);}
#block-3 {background-color: var(--color-3);}
#block-4 {background-color: var(--color-4);}
#block-5 {background-color: var(--color-5);}
#block-6 {background-color: var(--color-6);}
#block-7 {background-color: var(--color-7);}
#block-8 {background-color: var(--color-8);}

.blocks-wrapper.reDrawed .block:nth-child(1) {animation-delay: 0ms;}
.blocks-wrapper.reDrawed .block:nth-child(2) {animation-delay: 40ms;}
.blocks-wrapper.reDrawed .block:nth-child(3) {animation-delay: 80ms;}
.blocks-wrapper.reDrawed .block:nth-child(4) {animation-delay: 120ms;}
.blocks-wrapper.reDrawed .block:nth-child(5) {animation-delay: 160ms;}
.blocks-wrapper.reDrawed .block:nth-child(6) {animation-delay: 200ms;}
.blocks-wrapper.reDrawed .block:nth-child(7) {animation-delay: 240ms;}
.blocks-wrapper.reDrawed .block:nth-child(8) {animation-delay: 280ms;}

@keyframes arrAnim {
    0% {
      opacity: 0;
      transform: rotateX(-90deg);
    }
    100% {
      opacity: 1;
      transform: rotateX(0deg);
    }
  }
<!DOCTYPE html>
<html xml:lang="ru-RU" lang="ru-RU">

</html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./main.js"></script>
</head>

<body>
    <div class="container">
        <div class="blocks-wrapper">
            <div class="block" id="block-6">6</div>
            <div class="block" id="block-2">2</div>
            <div class="block" id="block-3">3</div>
            <div class="block" id="block-1">1</div>
            <div class="block" id="block-7">7</div>
            <div class="block" id="block-4">4</div>
            <div class="block" id="block-8">8</div>
            <div class="block" id="block-5">5</div>
        </div>
    </div>
</body>


Источник

Ответы (2 шт):

Автор решения: Eugene X

Ну например вот так

[...document.querySelectorAll('.block')]
  .sort((a, b) => Number(a.textContent) - b.textContent)
  .forEach(el => document.getElementsByClassName('blocks-wrapper')[0].append(el))

За что очень люблю JS, так это за то чего много что можно решить всего 1й строчкой :P

→ Ссылка
Автор решения: Sergey Glazirin

Просто необходимо добавить сортировку массива перед тем, как вывести массив array.sort((a, b) => a - b).

const array = [6, 2, 3, 1, 7, 4, 8, 5];

function DrawArray() {
  var wrapper = $(".blocks-wrapper");
  wrapper.html('');
  // добавлена сортировка
  array.sort((a, b) => a - b).forEach(element => {
    wrapper.append(`<div class="block" id="block-${element}">${element}</div>`);
  });
  wrapper.addClass('reDrawed');

  setTimeout(() => {
    wrapper.removeClass('reDrawed');
  }, 1000)
}

// добавил вызов кода
DrawArray()
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400&display=swap');
:root {
  --color-1: hsla(0, 100%, 45%, 0.7);
  --color-2: hsla(60, 100%, 45%, 0.7);
  --color-3: hsla(90, 100%, 45%, 0.7);
  --color-4: hsla(135, 100%, 45%, 0.7);
  --color-5: hsla(180, 100%, 45%, 0.7);
  --color-6: hsla(225, 100%, 45%, 0.7);
  --color-7: hsla(270, 100%, 45%, 0.7);
  --color-8: hsla(315, 100%, 45%, 0.7);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 20px;
  font-family: 'Anek Latin', sans-serif;
}

.container {
  width: 100%;
  padding: 15px;
}

.blocks-wrapper {
  max-width: 450px;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 50px;
  height: 50px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  margin: 10px;
  padding: 5px;
  transition: all 0.3s;
  animation-name: arrAnim;
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

#block-1 {
  background-color: var(--color-1);
}

#block-2 {
  background-color: var(--color-2);
}

#block-3 {
  background-color: var(--color-3);
}

#block-4 {
  background-color: var(--color-4);
}

#block-5 {
  background-color: var(--color-5);
}

#block-6 {
  background-color: var(--color-6);
}

#block-7 {
  background-color: var(--color-7);
}

#block-8 {
  background-color: var(--color-8);
}

.blocks-wrapper.reDrawed .block:nth-child(1) {
  animation-delay: 0ms;
}

.blocks-wrapper.reDrawed .block:nth-child(2) {
  animation-delay: 40ms;
}

.blocks-wrapper.reDrawed .block:nth-child(3) {
  animation-delay: 80ms;
}

.blocks-wrapper.reDrawed .block:nth-child(4) {
  animation-delay: 120ms;
}

.blocks-wrapper.reDrawed .block:nth-child(5) {
  animation-delay: 160ms;
}

.blocks-wrapper.reDrawed .block:nth-child(6) {
  animation-delay: 200ms;
}

.blocks-wrapper.reDrawed .block:nth-child(7) {
  animation-delay: 240ms;
}

.blocks-wrapper.reDrawed .block:nth-child(8) {
  animation-delay: 280ms;
}

@keyframes arrAnim {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="blocks-wrapper">
    <div class="block" id="block-6">6</div>
    <div class="block" id="block-2">2</div>
    <div class="block" id="block-3">3</div>
    <div class="block" id="block-1">1</div>
    <div class="block" id="block-7">7</div>
    <div class="block" id="block-4">4</div>
    <div class="block" id="block-8">8</div>
    <div class="block" id="block-5">5</div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.