Как сделать так, чтобы рандомно менялось имя?

Question

Например: Есть список людей (Маша, Саша, Лена, Никита). Нужно, чтобы они автоматически (спустя какое-то время) плавно и рандомно сменялись

Answer 1

let name = document.querySelector('.name');
let users = [
    'User1',
    'User2',
    'User3',
    'User4',
    'User5',
    'User6',
]

let oldUser = getRandomInt(6);
name.innerText = users[oldUser];

setInterval(function () {
    let user;
    do {
        user = getRandomInt(6);
    } while (user == oldUser);
    name.classList.toggle('visibleOff');
    setTimeout(function () {
        name.innerText = users[user];
    }, 500);
    setTimeout(function () {
        name.classList.toggle('visibleOff');
    }, 500);
    oldUser = user;
}, 2000);

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #2c3e50;
}

.name {
    font: 20px sans-serif;
    color: white;
    text-transform: capitalize;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.visibleOff {
    opacity: 0;
}

<body>
    <div class="main">
        <div class="name"></div>
    </div>
</body>

Answer 2

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
setInterval(function() {
  $('.random-name span').each(function() {
    $(this).removeClass('active');
  });
  let rand = getRandomIntInclusive(0, $('.random-name span').length - 1);
  console.log(rand);
  $('[data-id="' + rand + '"]').addClass('active');
}, 2000)

.random-name {
  position: relative;
}

.random-name span {
  position: absolute;
  opacity: 0;
  transition: 1s;
}

.random-name span.active {
  opacity: 1;
  transition: 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="random-name">
  <span data-id="0">Маша</span>
  <span data-id="1">Саша</span>
  <span data-id="2">Лена</span>
  <span data-id="3">Никита</span>
</div>

БЛОГ НА HUSL

Как сделать так, чтобы рандомно менялось имя?

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