[日付・時刻]JavaScriptを使えば、現在時刻をテキストでリアルタイムに表示し続けるデジタル時計をウェブページ上に作ることも簡単にできます。現在時刻を得て、ページ上の文字列を書き換える処理を、1秒毎に自動実行するよう記述すれば良いだけです。現在時刻を得て表示する方法1秒毎に特定の処理(関数)を実行する方法1秒毎に描画を更新して、リアルタイムに表示し続けるデジタル時計を作るHTML+JavaScriptソース現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法JavaScriptを使えば、現在の日付や時刻が得られます。一定間隔ごとに特定の処理を自動実行する方法は、記事「経過時間(秒数)をリアルタイムに表示する」で書きました。これを使えば、現在時刻をテキストでリアルタイムに表示し続けるデジタル時計を作ることも簡単にできます。(※以下は、表示桁数の調整前)※ここに時計が表示されます。上記のサンプルは、ページ(スクリプト部分)が読み込まれると同時に、1秒毎に現在時刻を表示(更新)し続けます。「リアルタイムに表示し続ける時計」になるわけです。描画用の領域にある文字列を書き換え上記1~4を、1秒毎に繰り返す。ほんの数行のJavaScriptソースで作れる簡単なものです。上記のサンプルだと、時・分・秒ともに、そのときの時刻によって表示桁数が1~2桁で変化します。」のように常時2桁で表示させたいですよね。その辺の処理も加えるともうちょっと長くなりますが(後述)、いずれにしても簡単に作れます。現在時刻を得て表示する方法まずは、現在時刻を得てからウェブページ上に表示する処理を作ってみます。先に、以下のようにp要素を記述して、時計を描画する領域を確保しておきます。id="RealtimeClockArea">※ここに時計が表示されます。</p>スクリプトは、以下のように記述します。msg;やっていることはとても簡単ですよね。1行目から順に内容を説明すると、Dateオブジェクトを生成(=現在日時が変数nowTimeに入る)getHoursメソッドを使って、Dateオブジェクトから「時」を抜き出す(=変数nowHourに時の値が入る)getMinutesメソッドを使って、Dateオブジェクトから「分」を抜き出す(=変数nowMinに分の値が入る)getSecondsメソッドを使って、Dateオブジェクトから「秒」を抜き出す(=変数nowSecに秒の値が入る)時計表示用の文字列を作成して、変数msgに格納id名「RealtimeClockArea」を指定した領域に掲載(書き換え)......となります。この処理を、一定時間毎(1秒毎)に実行すれば良いわけです。1秒毎に特定の処理(関数)を実行する方法1秒毎に特定の処理を実行するには、記事「経過時間(秒数)をリアルタイムに表示する」に書いた通り、setIntervalメソッドを使います。詳しい説明はそちらの記事で書いているので、必要であれば別途ご参照下さい。先の「現在時刻を得て表示する」という一連の処理をshowClock1という関数名で関数にしたとすると、これを1秒毎に繰り返し実行するには、以下のように記述します。setInterval('showClock1()',1000);たったこれだけです。第1引数は指定時間後に自動実行される関数、第2引数は指定時間をミリ秒で表した数値です。値が「1000」なら意味は「1000ミリ秒」なので、つまり「1秒」ということです。時計の表示を停止する必要があるのなら、もうちょっと記述が必要ですが、ページの表示を終える(=他のページへ移動したりブラウザを閉じたりする)までずっと継続し続けるのであれば、上記のように記述するだけで十分です。1秒毎に描画を更新して、リアルタイムに表示し続けるデジタル時計を作るHTML+JavaScriptソースさて、これまでにご紹介した内容を組み合わせると、「リアルタイムに現在時刻を表示し続けるデジタル時計」ができあがります。JavaScriptソースをまとめると、以下のようになります。id="RealtimeClockArea">※ここに時計が表示されます。msg;}setInterval('showClock1()',1000);JavaScriptの中身部分は9行程度ですから、とても簡単ですよね。上記では、分かりやすいように変数をたくさん使っていますが、もっと短く書くことも可能です。(ここではその説明は割愛しますが。^^;)ところで、先も述べた通り、上記の例だと、そのときの時刻によって表示桁数が1~2桁で変化します。」のように常時2桁で表示させたいですよね。以下では、桁数を常に2桁にする処理も加えています。id="RealtimeClockArea2">※ここに時計(2桁固定版)が表示されます。msg;}setInterval('showClock2()',1000);引数として指定された数値が1桁(=10未満)だったら、頭に「0」を加えて2桁の文字列にして返す関数「set2fig」を追加しています。これを実際に表示すると、以下のようになります。※ここに時計(2桁固定版)が表示されます。ともに2桁に固定された、デジタル時計らしい表示になりました。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:ウェブページ全般の製作依頼だけでなく、特定の機能を提供するJavaScript単体の作成作業も含め、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。モダンスタイルによる基礎から現場での応用まで▲JavaScriptの文法仕様を基礎からしっかり把握したい場合にお勧めです。解説がとても詳しく、基礎から応用まで網羅されていて、JavaScriptを隅々まで理解するのに役立ちます。JavaScriptを詳しく知るには、とりあえずこれを1冊読みましょう。▲JavaScriptのライブラリやフレームワークが、ひたすら多数紹介されています。目的に応じてどんなライブラリを使えば良いのか、そもそもどんなライブラリがあるのか知るのにお勧めです。▲正確な文法を知りたいとき、手軽にさっと調べられる辞書(辞典)として手許に置いておきたい場合に。▲jQueryを活用する方法について、サンプルと実現ソースが見やすく列挙された解説書。基礎から分かりやすく説明されています。▲jQueryを活用して実現できる様々なパーツ(デザインやUI)の実装方法を列挙した解説書。サンプルが多数あります。JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。......と言っても初心者向けでは決してないので注意してね。^^;JavaScriptに関する解説書は、自分に合うかどうか立ち読みして確認したり、せめて購入前に目次などから大まかな内容はチェックしておいた方が良いと思います。TIPSふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(16)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。関連するかもしれない情報など▼このページに関連しそうな記事が約8本くらい自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。