display:flexとJavaScriptで数秒ごとに繰り返しランダム表示する方法

2022.01.25最終更新日：2023.09.18

display:flexとJavaScriptで数秒ごとに繰り返しランダム表示する方法

【display:flexとJavaScript】数秒ごとに繰り返しランダム表示

こんにちは。五平餅くんです。

以前、display:flexとJavaScriptでランダムな並び順での表示の実装方法を投稿しました。

display:flexとJavaScriptを使ってランダム表示を実装

こんにちは。五平餅くんです。あまり使う機会がないかもしれませんが、今回はランダム表示についてご説明したいと思います。 WordPressでループを回すときはランダム表示が可能になりますが、今回はWordPressでない時の場合です。 HTML、CSS：まずはdisplay:flexを指定 <...

今回はその応用です。

ランダムな並びでの表示を数秒ごとに繰り返して実行。毎回ランダムな並びで。

ややこしいですが、まずはデモをご覧ください！

1 完成コード
2 解説
3 まとめ

完成コード

<div class="inner">
  <div class="flex">
    <div class="flex-child js-flex-child-0">
      <p class="txt-box">0</p>
    </div>
    <div class="flex-child js-flex-child-1">
      <p class="txt-box">1</p>
    </div>
    <div class="flex-child js-flex-child-2">
      <p class="txt-box">2</p>
    </div>
    <div class="flex-child js-flex-child-3">
      <p class="txt-box">3</p>
    </div>
    <div class="flex-child js-flex-child-4">
      <p class="txt-box">4</p>
    </div>
    <div class="flex-child js-flex-child-5">
      <p class="txt-box">5</p>
    </div>
    <div class="flex-child js-flex-child-6">
      <p class="txt-box">6</p>
    </div>
    <div class="flex-child js-flex-child-7">
      <p class="txt-box">7</p>
    </div>
    <div class="flex-child js-flex-child-8">
      <p class="txt-box">8</p>
    </div>
    <div class="flex-child js-flex-child-9">
      <p class="txt-box">9</p>
    </div>
    <div class="flex-child js-flex-child-10">
      <p class="txt-box">10</p>
    </div>
  </div>
</div>

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

.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-right: -20px;
}

.flex-child {
  margin-top: 40px;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
}

.txt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 0;
  height: 100%;
  background: #f5f5f5;
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
}

※ここまでは前回と同じです。

function setRandShow() {
  //数字の配列を作る
  var array = [0,1,2,3,4,5,6,7,8,9,10];

  for (i = array.length - 1; i > -1; i--) {

    // i × ランダムな整数
    var j = Math.floor(Math.random() * (i + 1));

    //array_tmpにarrayの現在の数字を保存
    var array_tmp = array[i];

    //10から順番にランダムな数字に変化
    array[i] = array[j];

    //ランダムな数字の方は元々の数字に変化
    array[j] = array_tmp;

    //.js-flex-child-0~.js-flex-child-10までのorderを変更
    document.querySelector('.js-flex-child-'+ i).style.order = array[i];
  }
}

//最初にシャッフルする
setRandShow();

//タイマーつける
setInterval(function(){
  setRandShow();
}, 4000);

こちらのコードで表示したデモはこちらです。

デモはこちら

数秒ごとにランダム表示が実行されていると思います。