ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/04/22
NEW
JavaScriptなしで学ぶ、『GLightboxでポップアップする画像ギャラリーを実装しよう』をリリースしました
2024/04/18
NEW
【週刊ドットインストール】 料金プランページがリニューアル、レッスン制作の進捗
PREMIUM
【旧版】JavaScriptでカウントダウンタイマーを作ろう
JavaScriptでカウントダウンタイマーを作る方法を学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでカウントダウンタイマーを作ろう
カウントダウンタイマーを作りながら、JavaScriptでの日時計算について学んでいきます。
0%
動画レッスン一覧
(12)
質問と回答
(1)
#01 カウントダウンタイマーを作ろう
(02:43)
無料公開中
完成版の確認
index.htmlの作成
styles.cssの作成
main.jsの作成
未完了
#02 JavaScriptを書く準備をしよう
(02:38)
無料公開中
HTMLのマークアップ
要素の取得
未完了
#03 カウントダウンの仕組みを理解しよう
(02:23)
無料公開中
カウントダウンの仕組みについて
未完了
#04 カウントダウン機能を実装してみよう
(02:53)
カウントダウン機能の実装
未完了
#05 残り時間を表示させよう
(02:55)
残り時間の表示
未完了
#06 タイマーが止まるようにしよう
(02:32)
タイマー終了の実装
未完了
#07 残り時間をセットしてみよう
(02:14)
残り時間設定機能の実装
未完了
#08 一時停止、再開ができるようにしよう
(02:41)
一時停止機能の実装
再開機能の実装
未完了
#09 タイマーを仕上げていこう
(02:18)
カウントダウン中の動作調整
残り時間が60分以上になったときの調整
未完了
#10 全体のスタイルを整えよう
(02:48)
タイマーのスタイリング
未完了
#11 ボタンのスタイルを整えよう
(02:34)
ボタンのスタイリング
未完了
#12 タブに残り時間を表示させよう
(01:33)
残り時間のタブ表示
未完了
#06 タイマーが止まるようにしよう
setTimeout から clearTimeout までの処理について教えてください
2017年10月21日
リリース情報(note)
『JavaScriptでカウントダウンタイマーを作ろう』を追加しました
関連キーワード
基礎講座
(400)
初心者向け
(388)
HTML
(119)
CSS
(121)
JavaScript
(162)
ミニプログラム
(143)
詳細情報
最終更新日
2017年7月13日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript