WebデザイナーのためのJavaScript & jQuery入門

日付のカウントダウンを作ってみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
特定の日付にむかって、1秒ずつカウントダウンする表示をつくります。日付、時間の計算方法を考えてみましょう。
講師:
11:11

字幕

このレッスンでは JavaScript によるカウントダウンを作ってみましょう。カウントダウンは日付そして時間の計算方法が大切です。では、begin と final のファイルを2つ共ブラウザにドラッグ&ドロップで見てみましょう。すると、 begin は何も動いていませんがfinal ではこのようにカウントが進んでいます。この数字は日付・時間によって異なる状態になっています。では、 begin のファイルをSublime Text に落としてこのように開いたら画面を並べてプログラムを書いていきましょう。27行目の function count という関数の中身を記述します。まず today 今日の変数を定義してnew Date と打ち込みます。これで日付オブジェクトを使う準備ができました。そしてその中から西暦の年を取り出したいので= today. getFullYearというメソッドで、これで4桁の西暦の数字を取得することができます。今度は目的の時間です。目的の時間は来年の1月1日としたいのでnextYear という変数を定義した後にnew Date そしてこの ( ) の中に今上で作りだした Year これに1年足したら来年という表示になります。 そして1月の1日とカンマで区切りますが月に関してはプログラム上0からスタートということになっているので1月を取得したい場合はここを0としたいのですがそれだと少しややこしいのでここでもうマイナス1としておけばこの最初に来る数字がその月ということになります。それでは、この日付がちゃんと取得できているかブラウザで確認してみたいのでconsole.log そしてその中に nextYear とメッセージを入れておきます。そして上書き保存をしたらブラウザにフォーカスして更新。そしてここで右クリックしてコンテキストメニューから「要素の検証」を押すとこのようにデベロッパーツールが開きますがその中から Console というメニューをクリックします。そうしますとこの console log というのがこの Console に表示をしてくださいという命令なのでこちらに来年の1月1日という表記が出ている筈です。それでは、続きをやっていきましょう。Sublime Text の方で今度は mSecこれはミリセカンドという変数を宣言します。そして nextYear.getTime( )マイナス today.getTime( )これは getTime というもので1970 年を基準とした経過時間をミリセカンド、千分の1秒で取得することができます。 つまり来年までの経過時間から現在の経過時間を引けばマイナスで引けばカウントダウンの時間が取得できるという計算式です。試しにこちらも console.log でどういう値が取得できているか確認をしてみましょう。上書き保存をしてブラウザを更新します。そうすると物凄い大きな数ですがこれが千分の一秒単位で書かれたカウントダウンの数字です。ですが、このままではあまり実感が湧かないのでこれを日・秒・分などに分割をしていきたいと思います。それでは Sublime Text に戻って日を求めてみましょう。日は nextDay そしてMath.floor で小数点を切り捨てというメソッドを使って上で取得したこの膨大な数字のミリセカンドを割り算します。そして割り算の内容ですがまず 1000 で割ってみましょう。1000 と入力しましたら、この下にconsole.log で、Console に表示をしてみましょう。mSec と書いたら上書き保存。そして更新です。console.log の中に nextDayと入れまして上書き保存。そしてブラウザにフォーカスして更新。そうしますと、このように経過時間から304 が小数点に変わったのでMath.floor で小数点が切り捨てられた秒が取得できます。 そして 1000 で割っただけではなくて日を取得したいので更に 60 で割ると、秒掛ける60で分に変わりそれに60を掛けると、分が時間に変わりそれに更に24を掛けると日が取得できるというわけです。上書き保存をしてブラウザ上で更新。そうすると 329 となり329 日という値が取得できました。この値は時間によってやはり変わってきますがこのように最大3桁の数字になるかと思います。同様に計算式を作っていきますがあとはコメントを解除してみましょう。Mac はショートカットでCommand+/Windows は Ctrl+/ で計算式をコメント解除します。そうするとこちらは今までの合計のミリセカンドから只今計算した日を引くことで残りの時間が求められます。そしてまた時間を割り算して人間に分かりやすい表記に直していくということをしていくんですね。ということで同様にこの計算式をコメントアウトで一度表示をしてみましょう。このように経過秒同じような計算式がずうっと続いていきます。そして上書き保存をして一度ブラウザで更新。そうしますと、このようにそれぞれの値がミリセカンドではなくてちゃんと分かりやすい表記に変わっていることが分かります。 ではいよいよこれを HTML 上に表示していきましょう。表示をするために displayという変数を作って一旦空にしておきます。そしてこの中に表示させたいメッセージを入れていきます。display += nextDayに日を追加してそしてセミコロンこれを Ctrl+C またはCommand+C でコピーをしてそしてペーストCommand+V Ctrl+V で3つ増やしたらDay を Hourそしてこちらは分の Minそして最後は Secそしてこの数字の後ろにつくメッセージを「時間」「分」として最後を「秒」とします。そして HTML に表示させるにはdocument.getElementById でカウントダウンという Id を取得してそして ドットInnerHTML としてdisplay とすることで HTML にdisplay を呼び出すことができますのでここで上書き保存をしてブラウザで更新をします。そうするとこのように表示がされるのですがカウントは減っていきません。ブラウザをもう一度更新すると一応表示は変わっています。最後の仕上げに一秒に一回ずつ関数を実行してもらうという命令をかきましょう。 今既にあるこの count というものはCommand+/ 、Ctrl+/ で一度コメントアウトしてsetInterval そして countそして 1000 そしてセミコロンで閉じて上書き保存をしてブラウザをフォーカスして更新をします。そうしますと、一秒おきに関数が実行されることになります。Console 上も一秒ずつ更新されてしまうのでプログラムが完成したらconsole.log は外してもかまいません。このレッスンでは日付と時間を計算してカウントダウンを作るということを学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。