Блог

Главная - Вопросы по программированию - Html: выберите случайную строку из массива и покажите ее одну за другой с задержкой

Html: выберите случайную строку из массива и покажите ее одну за другой с задержкой

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть код, который возвращает строки, но я хочу отображать строки случайным образом. Если у вас есть код получше, приветствия. Основная задача — иметь список слов и скрипт, который отображает эти слова в случайном порядке, но без замены одного слова другим, а именно одно за другим. Задержка должна быть настраиваемой.

 $("#slideShow .fadeInAmate").each(function(i) {
  $(this).delay(200 * i).fadeIn(2000, function() {
    $(this).prev().addClass('foo');
  });
});  
 #slideShow p {
  display: none;
}

.foo {
  color: #000;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://jforaker.github.io/jQuery-FadeInAmate/src/jquery.fadeInAmate.js"></script>

<div id="slideShow">
  <p class="fadeInAmate">This is my first line</p>
  <p class="fadeInAmate">Here goes my second line</p>
  <p class="fadeInAmate">Then comes third line</p>
  <p class="fadeInAmate">Following to that fourth line</p>
  <p class="fadeInAmate">And finally here goes my fifth line</p>
</div>

Комментарии:

1. Чтобы уточнить: вы хотите рандомизировать порядок анимации (от первого к последнему по времени), порядок размещения (сверху вниз) или оба?

Ответ №1:

Сначала просто перетасуйте HTML-элементы с помощью Math.random() , а затем перейдите к своему коду.

 function shuffle(){
  var slideShow = $(".fadeInAmate");
  for(var i = 0; i < slideShow.length; i  ){
    var target = Math.floor(Math.random() * slideShow.length -1)   1;
    var target2 = Math.floor(Math.random() * slideShow.length -1)  1;
    slideShow.eq(target).before(slideShow.eq(target2));
  }
}

function animate(){
  $("#slideShow .fadeInAmate").each(function(i) {
    $(this).delay(200 * i).fadeIn(2000, function() {
      $(this).prev().addClass('foo');
    });

  });
}

shuffle();
animate();  
 <!DOCTYPE html>
<html>
<head>
<style>
    #slideShow p {
display: none;
}

.foo {
color: #000;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://jforaker.github.io/jQuery-FadeInAmate/src/jquery.fadeInAmate.js"></script>
<div id="slideShow">
<p class="fadeInAmate">This is my first line</p>
<p class="fadeInAmate">Here goes my second line</p>
<p class="fadeInAmate">Then comes third line</p>
<p class="fadeInAmate">Following to that fourth line</p>
<p class="fadeInAmate">And finally here goes my fifth line</p>
</div>

</body>
</html>

Комментарии:

1. Если это помогло, не забудьте проголосовать и принять ответ :).