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

JavaScriptで数秒ごとに何度もランダム表示する方法

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

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

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

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

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

今回はその応用です。

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

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

完成コード

<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;
}

@media screen and (max-width: 1499px) {
  .inner {
    width: 97%;
  }
}

.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);

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

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

解説

まず、前回のJavaScriptのコードを関数にします。

function setRandShow() { } の中にそのまま前回のコードを入れる感じです。


document.querySelector(‘.js-flex-child-‘+ i).style.order = array[i];
今回jQueryではなく素のJavaScriptで書いており、上記の部分を変更しております。

関数にしたらまず一回目を実行するためにsetRandShow();を記述します。

こちらを記述しないと毎回最初は順番に並んでおり、2回目からランダム表示、という感じになってしまいます。

そして最後にsetInterval()で何度も関数を実行するようにすれば完成です。

setInterval()の説明は下記がわかりやすいかと思います。

setInterval()は、一定時間が経過するごとに処理を実行する際に使用します。 経過する時間はミリ秒(1秒=1000)で指定します。

http://www.htmq.com/js/setinterval.shtml

※4000の部分は自由に書き換えてください。「何秒ごとに」の設定になります。

まとめ

今回は数秒ごとに繰り返しランダム表示を行う処理を実装しました。

あまり使う機会はないかもしれませんが、参考になれば光栄です。

最後まで読んでいただきありがとうございました!

また、前回お話しした「display:flexとJavaScriptでランダムな並び順での表示の実装方法」はこちらになります。もしよろしければご覧ください!

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

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

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