ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/11/30
NEW
【週刊ドットインストール】 サービス開始12周年!、Tailwind CSS入門リリース、256timesにて回答ボット稼働開始
PREMIUM
JavaScriptでカウントダウンタイマーを作ろう
カウントダウンタイマーを作りながら、JavaScriptでの日時計算について学んでいきます。
0%
動画レッスン一覧
(16)
質問と回答
(3)
未完了
#01 カウントダウンタイマーを作ってみよう
(02:40)
無料公開中
完成版の確認
作業用フォルダの設定
index.htmlの作成
未完了
#02 実装の準備をしよう
(02:48)
無料公開中
index.htmlのマークアップ
main.jsの作成
未完了
#03 実装の流れを確認しよう
(01:26)
無料公開中
タイマー機能の実装方針
日時オブジェクト
未完了
#04 終了時刻を求めよう
(02:21)
無料公開中
終了時刻の計算
new Date()
getTime()
未完了
#05 関数を一定時間ごとに呼び出そう
(01:59)
setInterval()
未完了
#06 残り時間を求めよう
(02:41)
残り時間の計算
textContent
未完了
#07 タイマーを終了させよう
(02:40)
タイマーの終了
clearInterval
未完了
#08 残り時間を分と秒で表示させよう
(02:48)
Math.floor()
ミリ秒を分と秒に分解する方法
テンプレートリテラル
未完了
#09 残り時間の桁数を合わせよう
(02:30)
padStart()
String()
.disabled
未完了
#10 CSSでスタイリングしていこう
(01:39)
文字コードの指定
style.cssの作成
mainのスタイリング
未完了
#11 全体のスタイルを整えよう
(02:09)
背景色
余白の設定
中央配置
未完了
#12 テキストのスタイルを整えよう
(01:44)
スタイルのリセット
テキストのスタイリング
未完了
#13 ボタンのスタイルを整えよう
(02:10)
スタイルのリセット
ボタンのスタイリング
未完了
#14 ボタンが押せることをわかりやすくしよう
(01:55)
cursor
:hover
:active
opacity
未完了
#15 ボタンを無効化したときの見た目を作ろう
(02:42)
classList.add()
classList.remove()
:hover
未完了
#16 完成したアプリを振り返ろう
(01:15)
これまでのまとめ
次のステップ
#04 終了時刻を求めよう
const endTime を用意する際になぜ new Date().getTime() で出した現在時刻に 3 を足すのでしょうか?
2023年9月12日
#07 タイマーを終了させよう
なぜ if(countdown == 0){} を使うと実行されないのですか?
2023年8月18日
#15 ボタンを無効化したときの見た目を作ろう
なぜ button の場合は .inactive が反映され #btn にすると反映されないのですか?
2023年4月4日
リリース情報(note)
『JavaScriptでカウントダウンタイマーを作ろう』のレッスンをリリースしました!
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML
(116)
CSS
(118)
JavaScript
(158)
ミニプログラム
(143)
詳細情報
最終更新日
2022年11月28日
バージョン情報
Chrome 107 / Visual Studio Code 1.73.1