【初心者向け】コピペで使えるシンプルなカウントダウンボタン

コード

See the Pen start_button by naostudy0 (@naostudy0) on CodePen.

説明

html

<!-- ボタンを押すとcountDownが実行されます。(5)は秒数で、変更可能です。-->
<button id="start-btn" onclick="countDown(5)">スタート</button>

<!-- countDownにより、秒数や開始のメッセージが表示されます。 -->
<p id="text"></p>

javascript

// 指定した秒数カウントダウンし、その後メッセージが表示されます。
function countDown(second) {
  // 何回もボタンを押すとおかしな挙動になるので、ボタンを1度押した後はボタンを非表示にしています。
  document.getElementById("start-btn").style.display = "none";

  // 秒数が0になるまでの処理
  if (second >= 0){
      /* 
　　　　　　　　　　　　　　　　　　setTimeoutはタイマー機能です。setTimeoutの中にsetTimeoutを記載することで、
         連続して動作させています。
         書き方は、setTimeout(実行する内容, 間隔); 間隔はミリ秒なので、1000で1秒です。 
　　　　　　　　　　　　*/
      setTimeout(function () {
          // id="text"に秒数を表示します。
          text.innerHTML= second;
          // 秒数を1減らします。
          second--;
          // もう一度countDownが実行されます。秒数は、second--;によって１秒ずつ減っていきます。
          countDown(second);
      }, 1000);
  //秒数が0になった時の処理
  } else {
    // id="text"にstartの文字を表示します。
    text.innerHTML= "start";
  }
}

おわりに

JavaScriptの勉強も始めました。
簡単にコピペで使えそうなコードを公開していこうと思います。