【JavaScript】デジタル時計を表示する方法。

Ads by Google

JavaScriptを使ってウェブサイトにデジタル時計を表示する方法を紹介します。

まずはhtmlの<head>〜</head>内に以下のスクリプトを記述します。

<script>
function clock() {
var myDay = new Array("日","月","火","水","木","金","土");
var now  = new Date();
var year = now.getFullYear(); // 年
var month = now.getMonth()+1; // 月
var date = now.getDate(); // 日
var day = now.getDay();
var hour = now.getHours(); // 時
var min  = now.getMinutes(); // 分
var sec  = now.getSeconds(); // 秒

// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }

// フォーマット①
var clock1 = hour + ':' + min + ':' + sec;

document . getElementById( 'clock-01' ) . innerHTML= clock1 . toLocaleString(); // div id="clock-01"

// フォーマット②
var clock2 = year + '年' + month + '月' + date + '日' + '(' + myDay[day] + '曜日)'  + hour + '時' + min + '分' + sec + '秒';

document . getElementById( 'clock-02' ) . innerHTML= clock2 . toLocaleString(); // div id="clock-02"

// 1000ミリ秒ごとに処理を実効
window . setTimeout( "clock()", 1000);
}
window . onload = clock;
</script>

続いて<body>〜</body>タグ内の好きな場所に、以下のコードを記述します。

<div id="clock-01"></div>
<!-- または -->
<div id="clock-02"></div>

基本的には以上でOK。

JavaScriptのコード内で、2種類の表示用フォーマットを定義しています。
1つあれば、もう一方は余分なので削除しても大丈夫。
対応するのは以下の部分です。

// フォーマット①
var clock1 = hour + ':' + min + ':' + sec;

document . getElementById( 'clock-01' ) . innerHTML= clock1 . toLocaleString(); // div id="clock-01"

// フォーマット②
var clock2 = year + '年' + month + '月' + day + '日' + '(' + myDay[day] + '曜日)'  + hour + '時' + min + '分' + sec + '秒";

document . getElementById( 'clock-02' ) . innerHTML= clock2 . toLocaleString(); // div id="clock-02"

[フォーマット①]か[フォーマット②]のお好きなほうをカスタマイズしてください。

以下、上記コードを実装したサンプルになります。

JavaScript デジタル時計:サンプルデモ

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Recent Commentsこの記事へのコメント

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です