###実現したいこと
ブラウザに10秒間カウントダウンを表示させたい。
スタートボタンを押す→ブラウザに表示されている10の数字がカウントダウンされ0になると止まる。
###試したこと
setTimeoutを使ってコンソール上に10秒間のカウントダウンされるのは確認済。
###現象
ブラウザを読み込むタイミングでカウントダウンが始まる。
コンソールに表示される。
###ソースコード
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>10秒カウント</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div id="timer">10</div> </div> <a href="" id="start" class="inactive">スタート</a> </div> <script src="main.js"></script> </body> </html>
css
#start { text-decoration: none; display: block; background: gray; color: #fff; height: 40px; border-radius: 20px; line-height: 40px; text-align: center; font-size: 18px; margin-top: 15px; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2); width: 300px; }
js
var count = 10; var countdown = function(){ console.log(count--); var id = setTimeout(countdown, 1000); if(count < 0){ clearTimeout(id); } } countdown();
###ブラウザの画面
https://i.gyazo.com/eb658db534a118d1eea3ba9059eed342.png
かなり初歩的な質問だとは思いますが、アドバイスいただけますでしょうか。
以上、ご確認お願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/30 07:47