5秒間隔でフォーム内に特定の文字を表示させるHTMLとJavaScriptのコード

正確性重視 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <form>
    <input type="text" id="display" value="" style="width: 100%; height: 100%; font-size: 80px; text-align: center; border: none; background-color: #f8f8f8; outline: none; font-family: sans-serif;">
  </form>

  <script>
    // 表示する文字列のリスト
    const characters = ['あ', 'い', 'う', 'え', 'お'];

    // 表示する文字列のインデックス
    let index = 0;

    // 表示するタイマー
    const timer = setInterval(() => {
      // 次の文字列を取得
      const character = characters[index];

      // フォーム内のテキストフィールドに表示
      document.getElementById('display').value = character;

      // インデックスを更新
      index = (index + 1) % characters.length;
    }, 5000);
  </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？