TOPページ >  タイマーや日付、日時を扱う > JavaScriptを使って現在の時刻を表示する

JavaScriptを使って現在の時刻を表示する

簡単な JavaScriptを使って、ホームページやブログなどのウェブサイトに 現在の日付や時刻を表示することができます。

1秒ごとに処理を繰り返すことで、タイムリーな時刻表示が可能です。パソコンの日時を使用しますので、パソコンの日時の設定が正確である必要があります

このサンプルで使用するJavaScriptのメソッドは次のようになります。

一定時間ごとに処理を行う(タイマーを指定する)
タイマーを識別する変数=setInterval(実行する関数,指定時間)
  1. タイマーを識別する変数:省略可能ですが、タイマーを解除する場合には識別するために変数が必 要です。
  2. 実行する関数:JavaScriptの関数を指定します。
  3. 指定時間:ミリ秒(1/1000秒)の指定になります。1秒ごとであれば、1000となります。
日時を取得する
オブジェクト名 = new Date(設定する日時)日付オブジェクトを作成
オブジェクト名.getFullYear()4桁の西暦を返す
オブジェクト名.getMonth()月を返す
オブジェクト名.getDate()日を返す
オブジェクト名.getDay()曜日を返す
オブジェクト名.getHours()時を返す
オブジェクト名.getMinutes()分を返す
オブジェクト名.getSeconds()秒を返す
  1. 日付や時刻を扱うには、new ステートメントを使用して日付オブジェクトを作成します。日付を設定する場合には、日付を表す文字列( "1973.12.24","Jan 16 1975"など)を引数として()内に指定します。省略すると、現在の日付に設定されます。
  2. getFullYear: 2005 などの4桁の西暦を返します。バージョン3.0以前のブラウザには対応していません。西暦を表すメソッドにはgetYear もありますが、これは西暦から 1900 を引いた値( 2005年なら"105")を返します。
  3. getMonth:実際の月よりも 1小さい値( 1月なら"0"、2月なら"1"を返しますので、表示の際には 1加える必要があります。
  4. getDay:日曜日なら"0"、月曜日なら"1"、土曜日なら"6"というふうに 0 から 6 の数値で返します。曜日の文字列をあらかじめ配列に設定し、このインデックス番号で指定するのがよいでしょう。
  5. getHours:24時間表示での時間を返します。

このサンプルのソースは、次のようになります。

<SCRIPT LANGUAGE="JavaScript">
<!--
setInterval ( 'clocknow()',1000 ) ; // 1秒間隔で繰返し実行します
function clocknow() {
weeks = new Array("日","月","火","水","木","金","土") ;
now = new Date() ;
y = now.getFullYear() ;
mo = now.getMonth() + 1 ;
d = now.getDate() ;
w = weeks[now.getDay()] ;
h = now.getHours();
mi = now.getMinutes();
s = now.getSeconds();

  // 月、日、時、分、秒が一桁のとき、頭に0を付加します
if ( mo < 10 ) { mo = "0" + mo ; }
if ( d < 10 ) { d = "0" + d ; }
if ( h < 10 ) { h = "0" + h ; }
if ( mi < 10 ) { mi = "0" + mi ; }
if ( s < 10 ) { s = "0" + s ; }

document.formclock.fieldclock.value = y + "年" + mo + "月" + d + "日(" + w + ")" + h + "時" + mi + "分" + s + "秒"; // 整形します
}
//-->
</SCRIPT>
<form name="formclock" >
<input type="text" name="fieldclock" size="40" style="border-width:0;background-color:#EEEEEE;">
</form>

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
JavaScriptを使って最終更新日を表示する
JavaScriptで文字を点滅させる
JavaScriptを使って現在の時刻を表示する
JavaScriptを使って今日の日付を表示する
JavaScriptを使ってクッキングタイマーを作る
文字をスクロールして表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス