［ホイール］と［クリア］アニメーションでカウントダウンタイマーを作成する方法

あかね田中

📖 目次

必要なもの
ステップ1: HTMLの準備
ステップ2: CSSの設定
ステップ3: JavaScriptの追加
ステップ4: カウントダウンのロジックを追加
ステップ5: アニメーションの追加
ステップ6: タイマーの表示
まとめ

必要なもの

カウントダウンタイマーを作成するためには、以下のものが必要です。

HTMLファイル
CSSファイル
JavaScriptファイル

ステップ1: HTMLの準備

まず、HTMLファイルを作成しましょう。以下のコードを使用して、基本的なHTML構造を作成します。

  
    <!DOCTYPE html>
    <html>
    <head>
      <title>カウントダウンタイマー</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <div id="timer"></div>
      <script src="script.js"></script>
    </body>
    </html>

ステップ2: CSSの設定

次に、CSSファイルを作成しましょう。以下のコードを使用して、タイマーのスタイルを設定します。

  
    #timer {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      font-size: 48px;
      text-align: center;
      line-height: 200px;
    }

ステップ3: JavaScriptの追加

次に、JavaScriptファイルを作成しましょう。以下のコードを使用して、タイマーのロジックを追加します。

  
    const timer = document.getElementById('timer');
    let timeLeft = 60;

    function countdown() {
      if (timeLeft === 0) {
        timer.innerHTML = '終了';
      } else {
        timer.innerHTML = timeLeft;
        timeLeft--;
        setTimeout(countdown, 1000);
      }
    }

    countdown();

ステップ4: カウントダウンのロジックを追加

JavaScriptファイルにカウントダウンのロジックを追加しましょう。上記のコードでは、60秒からカウントダウンを開始し、0になったら「終了」と表示されます。

ステップ5: アニメーションの追加

アニメーションを追加するために、CSSファイルに以下のコードを追加します。

  
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    #timer {
      animation: spin 1s linear infinite;
    }

ステップ6: タイマーの表示

最後に、HTMLファイルにタイマーを表示するための要素を追加します。上記のコードでは、idが「timer」のdiv要素を使用してタイマーを表示しています。

まとめ

以上が、［ホイール］と［クリア］アニメーションを使用してカウントダウンタイマーを作成する方法です。HTML、CSS、JavaScriptを組み合わせて、タイマーの表示とアニメーションを実現しました。この方法を使用すれば、簡単にカウントダウンタイマーを作成することができます。

あかね田中