javascript - 随机javascript div选择

Question

我想在最新销售 div 标签下方随机选择 javascript，但我的代码按顺序选择。我是 javascript 的新手，我该怎么办？我在谷歌上搜索和搜索并应用了一些步骤，但我无法成功。有人可以给我一个解释和解决方案吗？

感谢您的帮助。

<style>
.latest-sales {
    background: #fff;
    width: 280px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: none;
}
.latest-sales.active {
    display: block;
    animation-name: latest-animation;
    animation-duration: .5s;
}
@keyframes latest-animation {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>

<div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>Antalya</strong> lokasyonundan, <strong>10K Spotify Dinlenme</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>İstanbul</strong> lokasyonundan, <strong>100 Türk Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>3</strong> dakika önce <strong>İzmir</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>Ankara</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>5</strong> dakika önce <strong>Almanya</strong> lokasyonundan, <strong>100 Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>5</strong> dakika önce <strong>Fransa</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>1</strong> dakika önce <strong>İsviçre</strong> lokasyonundan, <strong>500 Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>Adana</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>5</strong> dakika önce <strong>Malatya</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>1</strong> dakika önce <strong>Tekirdağ</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
        </div>          


<script>
function sleep(ms) { return new Promise(resolve => { timeout = setTimeout(resolve, ms) }); } async function latest() { var latest = document.getElementsByClassName("latest-sales"); var i; for (i = 0; i < latest.length; i++) { await sleep(5000); latest[i].classList.add("active"); await sleep(8000); latest[i].classList.remove("active"); await sleep(5000); } } latest();
</script>[screenshot][1]

Answer 1

您可以创建一个 div 数组并将它们随机排列 (about shuffling)。使用 setTimeout 定期显示(打乱的)div 之一。像这样的东西:

(() => {
  // shuffle array of div.latest-sales
  const shuffleDivs = () => 
    shuffle(Array.from(document.querySelectorAll("div.latest-sales")));
  // hide the active element
  const hideActive = el => 
    el && el.classList.remove("active");
  // hide active element and activate [el]
  const showMessage = el => {
    hideActive(document.querySelector(".active"));
    el.classList.add("active");
  };
  // initialize
  let divsShuffled = shuffleDivs();
  let current = 0;
  
  // start showing a random div.latest-sales
  // every 5 seconds.
  showRandomMessage();

  function showRandomMessage() {
    showMessage(divsShuffled[current]);
    current += 1;
    
    // reshuffle and reset if all elements are used
    if (current == divsShuffled.length - 1) {
      divsShuffled = shuffleDivs();
      current = 0;
    }

    // show next div after 5 seconds
    setTimeout(showRandomMessage, 5000);
  }

  function shuffle(array) {
    let i = array.length;
    while (i--) {
      const ri = Math.floor(Math.random() * (i + 1));
      [array[i], array[ri]] = [array[ri], array[i]];
    }
    return array;
  }
})();

.latest-sales {
    background: #fff;
    width: 280px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: none;
}
.latest-sales.active {
    display: block;
    animation-name: latest-animation;
    animation-duration: .5s;
}
@keyframes latest-animation {
  from {opacity: 0;}
  to {opacity: 1;}
}

<div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>Antalya</strong> lokasyonundan, <strong>10K Spotify Dinlenme</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>İstanbul</strong> lokasyonundan, <strong>100 Türk Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>3</strong> dakika önce <strong>İzmir</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>Ankara</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>5</strong> dakika önce <strong>Almanya</strong> lokasyonundan, <strong>100 Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>5</strong> dakika önce <strong>Fransa</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>1</strong> dakika önce <strong>İsviçre</strong> lokasyonundan, <strong>500 Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>Adana</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>5</strong> dakika önce <strong>Malatya</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>1</strong> dakika önce <strong>Tekirdağ</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
  </div>