【JavaScript】一定時間ごとに表示内容を変える

2022年8月20日2022年11月23日

「setInterval」という関数を使い、一定時間経過すると文章が次々に変わっていく実装方法を紹介します。
また、ボタンをクリックすることで停止 / 再開させる方法も載せています。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

実装例

2秒ごとに文字が変わります！

コード

特定の処理を繰り返し実行する場合は、setInterval関数を使います。

第1引数に繰り返したい関数（関数名の後ろに()は付けないこと）、第2引数にミリ秒単位の数字を設定すると、設定した関数がミリ秒単位で繰り返し実行されます。

function show() {
  console.log('hello');
}

setInterval(show, 1000);

上の例では、1000ミリ秒（1秒）毎にshow関数が実行されます。

2秒毎に表示される文字が自動的に変わる

HTML/CSS/JavaScript コードはこちら

<p id="message-1">2秒ごとに文字が変わります！</p>

p {
  width: 80%;
  height: 100px;
  margin: 0 auto 16px;
  background-color: #eee;
  text-align: center;
  font-size: 36px;
  line-height: 100px;
}

const message1 = document.getElementById('message-1');

const messages = [
  'Good morning!',
  'Hello!',
  'Good evening!',
  'Good night!'
];

let i = 0;

function showMessage_1() {
  if (i == 4) {
    i = 0;
  }
  message1.textContent = messages[i];
  i++;
}

setInterval(showMessage_1, 2000);

予め表示したいメッセージを変数messagesに配列で格納しておき、関数showMessage_1で表示させる。
表示するメッセージ数に応じて、関数showMessage_1内の変数iの条件分岐を変更する。今回はメッセージ数が4つなので、4つ目のメッセージ（messages[3]）が表示されたあとi = 4となり、最初のメッセージ（messages[0]）に戻る。
関数setIntervalでは、第1引数に関数名、第2引数にミリ秒単位の数字を設定すると、その関数をミリ秒単位で繰り返すことができる。ただし、関数名の後ろには()を付けないこと。

ボタンクリックで文字の変更を停止または再開する

HTML/CSS/JavaScript コードはこちら

<p id="message-2">2秒ごとに文字が変わります！</p>
<button class="custom-button">メッセージ変更を停止</button>

p {
  width: 80%;
  height: 100px;
  margin: 0 auto 16px;
  background-color: #eee;
  text-align: center;
  font-size: 36px;
  line-height: 100px;
}

.custom-button {
  display: block;
  width: 40%;
  height: 50px;
  margin: 0 auto;
  background-color: red;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}

.custom-button:hover {
  opacity: .7;
}

ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わってボタン全体が半透明になるCSS。

const message2 = document.getElementById('message-2');
const btn = document.querySelector('.custom-button');

const messages = [
  'Good morning!',
  'Hello!',
  'Good evening!',
  'Good night!'
];

let i = 0;
let btnFlag = 0;

function showMessage_2() {
  if (i > 3) {
    i = 0;
  }
  message2.textContent = messages[i];
  i++;
}

let setIntervalId = setInterval(showMessage_2, 2000);

btn.addEventListener('click', () => {
  if (btnFlag == 0) {
    btnFlag = 1;
    btn.textContent = 'メッセージ変更を再開';
    btn.style.backgroundColor = 'blue';
    clearInterval(setIntervalId);
  } else {
    btnFlag = 0;
    btn.textContent = 'メッセージ変更を停止';
    btn.style.backgroundColor = 'red';
    setIntervalId = setInterval(showMessage_2, 2000);
  }
});

予め表示したいメッセージを変数messagesに配列で格納しておき、関数showMessage_2で表示させる。
表示するメッセージ数に応じて、関数showMessage_2内の変数iの条件分岐を変更する。今回はメッセージ数が4つなので、4つ目のメッセージ（messages[3]）が表示されたあとi = 4となり、最初のメッセージ（messages[0]）に戻る。
関数setIntervalでは、第1引数に関数名、第2引数にミリ秒単位の数字を設定すると、その関数をミリ秒単位で繰り返すことができる。ただし、関数名の後ろには()を付けないこと。
ボタンをクリックすると、ボタンのメッセージと色が変わる。またボタンの状態を示すフラグとしてbtnFlagを宣言しておき、btnFlag = 0のときはメッセージ変更がオン、btnFlag = 1のときはメッセージ変更がオフになる。
関数setIntervalを止めるにはclearIntervalを使い、引数には止めたいsetIntervalの返り値（この場合はsetIntervalId）を設定する。

応用例

メッセージ以外にももちろん適用できます。
以下のように、関連記事を2秒毎に変更することもできますね。

2秒毎に記事が変わるよ！

【2022年最新版】SDGs関連グッズ総まとめ本記事ではSDGs（エス・ディー・ジーズ）に関連した商品をピックアップ！天然素材やリサイクル素材といった地球環境に優しいものから、オーガニックコットンやフェアト…

2秒毎に記事が変わるよ！

【2022年最新版】あったかグッズ総まとめ秋冬ノベルティの中でも根強い人気のあるブランケットを中心に、最新のあったかグッズを纏めました。特に女性に人気の商品が多く、秋冬に行われるレディース向けのイベ…

2秒毎に記事が変わるよ！

【2022年最新版】防災関連グッズ総まとめ突然の災害など、もしもの非常事態に備えておきたい防災関連グッズを紹介します！ライトや防寒具、簡易トイレなどの個別商品から持出袋に入ったセットアイテムまで、幅…

2秒毎に記事が変わるよ！

【2022年最新版】衛生関連グッズ総まとめマスクや除菌スプレー、抗菌加工グッズなど、最新の感染症対策用品をピックアップしました。新型コロナウイルス対策はもちろん、普段の衛生管理にも役立てるはず！除菌…

2秒毎に記事が変わるよ！

【2022年最新版】和風グッズ総まとめ扇子や和食器などの日本ならではグッズから、日本を感じる和柄デザインのグッズ、日本が誇る食料品を中心にピックアップ！お祭りや花火大会、神社・お寺への参拝などの…

また、表示内容をランダムにすることもできます。詳しくはこちらの記事で紹介しています。
さらに本記事の応用編として、以下のように表示をフワッと切り替えることもできます。

Good morning！

Hello!

Good evening！

Good night！

以下記事にコードを載せていますので、詳しく知りたい方は合わせてご覧ください！

【JavaScript】一定時間ごとに表示内容を変える

実装例

コード

2秒毎に表示される文字が自動的に変わる

ボタンクリックで文字の変更を停止 または 再開する

応用例

ボタンクリックで文字の変更を停止または再開する