##コード
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の勉強も始めました。
簡単にコピペで使えそうなコードを公開していこうと思います。