0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

##コード

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--;によって1秒ずつ減っていきます。
          countDown(second);
      }, 1000);
  //秒数が0になった時の処理
  } else {
    // id="text"にstartの文字を表示します。
    text.innerHTML= "start";
  }
}

おわりに

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?