JavaScript show multiple div's at different time intervals

Question

JavaScript show multiple div's at different time intervals

Navigation

#1 by (1 votes)

1

My question is about how to make multiple elements appear with different classes and times. The idea is to do as the Live interaction of Facebook. The Code is as follows:

<ul class="reactions">
   <li class="size1">:)</li>
   <li class="size2">:o</li>
   <li class="size3">:(</li>
   <li class="size1">:/</li>
   <li class="size2">:-</li>
   <li class="size3">:*</li>
</ul>

By logic, Javascript (or Jquery) would have to print these 6 elements randomly by drawing size and "li", I have no idea how to do this. I already have them in html, you will not need to pull the bank. Can you help me?

javascript front-end

asked by anonymous 20.03.2017 / 12:26

1 answer

How to leave the last column fixed with horizontal scroolbar? Connection Problem with Intel XDK

score 1 · Accepted Answer

I do not know if this is the best way to do it, but it worked:

$(document).ready(function() {
  var ul = $("ul").find("li");
  var rand = function() {
    var randNumber = Math.floor((Math.random() * ul.length) + 0);
    ul.each(function() {
      $(this).hide()
    });
    $(ul[randNumber]).show();
    setTimeout(rand, randNumber * 300);
  }
  rand();


})

<script src='https://code.jquery.com/jquery-3.2.0.min.js'></script>
<ul class="reactions">
  <li hidden class="size1">:)</li>
  <li hidden class="size2">:o</li>
  <li hidden class="size3">:(</li>
  <li hidden class="size1">:/</li>
  <li hidden class="size2">:-</li>
  <li hidden class="size3">:*</li>
</ul>

I created a loop with SetTimeout() with random time, and an array with all li that keeps varying, taking advantage of the same random number and playing in array index. This number goes from 0 to the length of the array, and within the loop time it is multiplied by 300, but you can create another random number to specify the maximum time you want.

Example in jsfiddle