ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
PREMIUM
JavaScriptでストップウォッチを作ろう
JavaScriptでシンプルなストップウォッチを作る方法について学んでいきます。
0%
動画レッスン一覧
(12)
質問と回答
(85)
未完了
#01 ストップウォッチを作ってみよう
(02:57)
無料公開中
完成版の確認
index.htmlの作成
styles.cssの作成
main.jsの作成
未完了
#02 画面のマークアップをしよう
(02:31)
無料公開中
タイマーのマークアップ
ボタンのマークアップ
要素の取得
未完了
#03 カウントアップ機能を実装しよう
(02:52)
無料公開中
clickイベントの設定
Date.now()
setTimeout()
未完了
#04 タイマーを表示させよう
(03:00)
new Date()
padStart()
String()
未完了
#05 停止、リセットの機能を実装しよう
(02:20)
clickイベントの設定
clearTimeout()
未完了
#06 タイマーを再開できるようにしよう
(03:00)
clickイベントの設定
Date.now()
未完了
#07 タイマーの問題点を把握しよう
(02:47)
ボタンの状態
button要素のdisabled属性
未完了
#08 ボタンの有効/無効を切り替えよう
(02:54)
button要素のdisabled属性
関数化
未完了
#09 全体のスタイルを整えよう
(02:40)
bodyのスタイリング
.containerのスタイリング
未完了
#10 タイマーのスタイルを整えよう
(01:57)
#timerのスタイリング
button要素とdiv要素の違い
未完了
#11 ボタンのスタイルを整えよう
(02:50)
.btnのスタイリング
Flexbox
未完了
#12 ストップウォッチを完成させよう
(02:57)
classList.add()
classList.remove()
classList.contains()
#01 ストップウォッチを作ってみよう
VS Code の色を動画と同じにしたいです
2022年1月27日
#02 画面のマークアップをしよう
Windows のショートカットキーが知りたいです
2022年1月27日
全体をブロックで囲うのはなぜですか?
2022年1月27日
#03 カウントアップ機能を実装しよう
このコードは再帰呼び出しでコールスタックが膨大にならないのでしょうか?
2023年4月30日
カウントアップの仕組みがよくわかりません
2022年2月18日
Date() と new Date() の違いがわかりません
2022年1月27日
setTimeout を countUp の外に出すと console.log が一度しか実行されないのは何故でしょうか?
2022年1月27日
なぜブロック外でstartTimeを宣言しているのですか?
2022年1月27日
Date.now()とgetTime()は同じですか?
2022年1月27日
setTimeout()を使っている理由について教えて下さい
2022年1月27日
コンソールの結果が10ミリ秒間隔にならないのはなぜですか?
2022年1月27日
なぜ1ミリ秒ごとではなくて10ミリ秒毎に処理しているのですか?
2022年1月27日
経過時間がどう計算されているのかわかりません
2022年1月27日
let startTimeで値を設定していないのはなぜですか?
2022年1月27日
Date.now()とnew Date()の違いがわかりません
2022年1月27日
startTimeはなぜ初期化しないのですか?
2022年1月27日
startボタンを押してもカウントが開始されません
2022年1月27日
startのイベントでcountUp();が必要なのはなぜですか?
2022年1月27日
setTimeoutでのcountUpの表記について混乱しています
2022年1月27日
コンソールでカウントが始まらない
2022年1月27日
setTimeout(countUp, 10);ではだめですか?
2022年1月27日
#04 タイマーを表示させよう
なぜ new Date とするのですか?
2022年11月20日
timer.textContent の記載でエラーがでてしまい、前にすすめません
2022年1月27日
100 分の 1 秒までの表示にするにはどうしたらよいですか?
2022年1月27日
CountUp() と CountUp の違いがわかりません
2022年1月27日
constを使って値が再代入できるのはなぜですか?
2022年1月27日
setTimeoutとsetIntervalどちらが良いですか?
2022年1月27日
start をクリックすると 30 分経過した状態から始まります
2022年1月27日
new Date()に渡すのは年月ではないのですか?
2022年1月27日
Cannot set property 'textContent' of null ...と出ます
2022年1月27日
newを使うにもDateクラスがないのでは?
2022年1月27日
インスタンス化しないとメソッドは使えないのですか?
2022年1月27日
「const d = new Date(Date.now() - startTime);」は何をしているのですか?
2022年1月27日
setTimeout(countup(), 10); だとエラーになるのはなぜですか?
2022年1月27日
時間まで取得した場合に09:00:00からカウントが始まる
2022年1月27日
new演算子を使うときと使わないときの違いは?
2022年1月27日
'${m}:${s}.${ms}'がそのまま表示されてしまいます。
2022年1月27日
padStartとsliceはどちらがいいのでしょうか
2022年1月27日
#05 停止、リセットの機能を実装しよう
なぜ timeoutId を別の関数内で使うことができるのですか?
2022年8月23日
timeoutId をコンソールで確認するにはどうしたらいいですか?
2022年2月10日
setTimeout() の動作がよくわかりません
2022年1月27日
timeoutId に setTImeout を代入した後でも、setTimeout() が動くのは何故でしょうか?
2022年1月27日
const で宣言するとエラーになるのでは?
2022年1月27日
CountUp()内で無限ループしないのでしょうか...?
2022年1月27日
timeoutIdはreturnする必要はないのですか?
2022年1月27日
なぜsetTimeoutが実行されるのでしょうか?
2022年1月27日
timer.textContentはtimer.valueではだめですか?
2022年1月27日
startTimeとtimeoutIdには値を代入していないのですが意味があるのですか?
2022年1月27日
ストップウォッチがなぜか30:00:000からスタートします
2022年1月27日
Startの次にResetはなぜ押せないのでしょうか?
2022年1月27日
timeoutIdは宣言しなくていいのですか?
2022年1月27日
timeoutIdがよくわかりません。どういう仕組みでsetTimeoutがキャンセルされるのですか?
2022年1月27日
#06 タイマーを再開できるようにしよう
elapsedTime += Date.now() - startTime は経過時間を足して再代入しているのですか?
2023年4月4日
elapsedTime を足し上げる処理が理解できません
2022年11月20日
startTime のスコープ外でも startTime が使用できるのはなぜですか?
2022年6月1日
elapsedTimeはなぜ0で初期化するのですか?
2022年1月27日
+=に書き換えるとうまくいくのはなぜですか?
2022年1月27日
「elapsedTime += Date.now() - startTime」の意味が理解できない
2022年1月27日
elapsedTimeの動きがわかりません
2022年1月27日
startTimeとtimeoutIdを宣言するときに値を代入しないのはなぜですか?
2022年1月27日
#07 タイマーの問題点を把握しよう
なぜタイマーがいくつも起動するのですか?
2022年1月27日
#08 ボタンの有効/無効を切り替えよう
なぜ `start.disabled` という書き方が成立するのでしょうか?
2022年10月28日
disabled = trueにすると操作できなくなるのはなぜですか?
2022年1月27日
setButtonStateInitial( )をstart.addEventListener()の前に書くのはなぜですか?
2022年1月27日
#10 タイマーのスタイルを整えよう
ボタンに button タグを使ってもいいですか?
2022年8月23日
上下中央揃えにしたいときにheightプロパティは必要ですか?
2022年1月27日
buttonをdivで代替するようなケースは他にもありますか?
2022年1月27日
Ctrl + Alt + 下矢印をしたら画面がひっくり返りました
2022年1月27日
#11 ボタンのスタイルを整えよう
user-select で none 以外を設定することはありますか?
2022年1月27日
height と line-height の違いはなんですか?
2022年1月27日
ベンダープレフィックスとはなんですか?
2022年1月27日
#12 ストップウォッチを完成させよう
Date.now() とnew Date().getTime() との違いを教えてください
2023年4月18日
start の addEventListener 内の return で何が起こっているのかわかりません
2022年11月20日
ボタンが無効化される処理はどこで行っているのですか?
2022年10月28日
contains で inactive がついているかどうか調べているのですか?
2022年7月23日
return falseでも問題ないでしょうか?
2022年1月27日
disabled プロパティが使用できるのはどのような時でしょうか?
2022年1月27日
=== trueは必要ないのでは?
2022年1月27日
inactiveの有無がどこで判別されているのかわかりません
2022年1月27日
inactiveクラスに「pointer-events: none;」ではだめですか?
2022年1月27日
getHoursを使うと「9」が表示される
2022年1月27日
inactiveがなぜbtnクラスに反映されるのかわかりません
2022年1月27日
returnでどこにundefinedを返すかわかりません
2022年1月27日
returnを書くとボタンが無効になるのはなぜですか?
2022年1月27日
elapsedTimeの加算タイミングがわかりません
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2019年8月26日
バージョン情報
Chrome 76.0 / Visual Studio Code 1.37.1
関連キーワード
(6)
基礎講座
(369)
初心者向け
(368)
HTML
(115)
CSS
(116)
JavaScript (ES2017)
(36)
ミニプログラム
(142)
このレッスンを共有する