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

2023年7月8日

setInterval()という関数を使い、一定時間経過すると文章が次々に変わっていく実装方法を紹介します。
また、ボタンをクリックすることで停止 / 再開させる方法も載せています。

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

一定時間毎にテキストを変える実装例

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

2秒毎に変わるテキスト

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

2秒毎に変わるテキスト

HTML/CSS/JavaScript コード

特定の処理を繰り返し実行する場合は、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: #aaa;
  text-align: center;
  font-size: 36px;
  color: white;
  line-height: 100px;
}

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

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

const bgColors = [
  'skyblue',
  'tomato',
  'limegreen',
  'pink'
];

let i = 0;

function showMessage_1() {
  if (i == 4) {
    i = 0;
  }
  message1.textContent = messages[i];
  message1.style.backgroundColor = bgColors[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: #aaa;
  text-align: center;
  font-size: 36px;
  color: white;
  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;
}

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

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

const bgColors = [
  'skyblue',
  'tomato',
  'limegreen',
  'pink'
];

let i = 0;
let btnFlag = 0;

function showMessage_2() {
  if (i > 3) {
    i = 0;
  }
  message2.textContent = messages[i];
  message2.style.backgroundColor = bgColors[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秒毎に記事が変わるよ！

【実装事例集】コピペで使えるWebコーディング（HTML/CSS/JavaScript）多くのWebサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードなどを公開していますので、気にな…

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

【自動計算】比率計算ツールと計算方法比率の自動計算ツールです。（比を簡単にするツールはこちらの記事に移行しました。）後半では比率の計算方法を解説しています。左辺に比を入力します。右辺のいず…

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

【自動計算】期待値計算ツールと計算方法数字を入力するだけで期待値が求まるツールです。後半では期待値の計算方法について解説しています。確率（%）から期待値を求める確率（分数）から期待値を求める頻…

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

【自動計算】内税・外税の計算ツールと計算方法税率を入力し、内税または外税を選択します。表に単価と数量を入力すると、総額と税額を自動で算出します。税率 % 内税外税＋入力欄クリア単価数量金額 ✖…

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

好きな確率で当たりが出るコイン「当たり」が出る確率を自由に操作できるコインを作ってみました。任意の確率で当たり判定をしたい場合にご利用ください！％の確率で当たりが出ます。使い方インプッ…

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

Good morning！

Hello!

Good evening！

Good night！

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

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

一定時間毎にテキストを変える実装例

HTML/CSS/JavaScript コード

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

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

応用例

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