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

2024年8月2日

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）を設定する。