HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > JavaScript 日付・時刻をリアルタイム表示する 時計の作り方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

JavaScript 日付・時刻をリアルタイム表示する 時計の作り方


JavaScript 日付・時刻を表示する



ホームページの中に、現在の日付・時刻を表示する方法- 時計の作り方 -をご説明します
設置例として、2種類ご紹介します

1つ目は、簡単に設置したい、ページを開いた時の日時が表示されればいいという方向けの

簡易日時表示


2つ目は、設置がちょっとだけ面倒になりますが、ページを開いている最中も、リアルタイムで日時を更新し、最新時刻を表示させたい方、いわゆる時計を作りたい方向けの

リアルタイム日時表示1
リアルタイム日時表示2

です



簡易日時表示 ページを開いた時の、日付・時刻を表示します
リアルタイム日時表示1 リアルタイムで、日付・時刻を更新表示します

リアルタイム日時表示2 リアルタイムで、日付・時刻を更新表示します



リアルタイム日時表示1リアルタイム日時表示2、それぞれ独立して、1秒間のインターバルを取って処理しているため、それぞれの更新時間がコンマ数秒ずれています

インターバルタイムを小さくすれば、その分ずれも小さくなるのですが、コンマ数秒のずれが問題となるケースは、通常ないと覆いますので、負荷を考慮し、現状としています



簡易日時表示



HTMLソース上で、ホームページ内、body部の任意の場所に、下記のコードを埋め込んで下さい
埋め込んだところに、上記例のような、ページを開いた時の日付・時刻が表示されます


body部 <script type="text/JavaScript">
<!--

var DWs = new Array('Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.');
var Now = new Date();
var YY = Now.getYear();
var MM = Now.getMonth() + 1;
var DD = Now.getDate();
var DW = DWs[ Now.getDay() ];
var hh = Now.getHours();
var mm = Now.getMinutes();
var ss = Now.getSeconds();

if(YY < 2000) { YY += 1900; }

if(MM < 10) { MM = "0" + MM; }
if(DD < 10) { DD = "0" + DD; }
if(hh < 10) { hh = "0" + hh; }
if(mm < 10) { mm = "0" + mm; }
if(ss < 10) { ss = "0" + ss; }

document.write(' ' + YY + '.' + MM + '.' + DD + ' ' + DW + ' ' + hh + ':' + mm + ':' + ss + ' ');

// -->
</script>





リアルタイム日時表示1



HTMLソース上で、ホームページ内、body部の任意の場所に、下記のコードを埋め込んで下さい
埋め込んだところに、上記例のような、現在時刻が、リアルタイムに、更新表示されます


body部 <p id="Clock1" style="display: inline"></p>
<script type="text/javascript">
setInterval('showClock1()',1000);
function showClock1() {
var DWs = new Array('Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.');
var Now = new Date();
var YY = Now.getYear();
if (YY < 2000) { YY += 1900; }
var MM = set0( Now.getMonth() + 1 );
var DD = set0( Now.getDate() );
var DW = DWs[ Now.getDay() ];
var hh = set0( Now.getHours() );
var mm = set0( Now.getMinutes() );
var ss = set0( Now.getSeconds() );
var RTime1 = ' ' + YY + '.' + MM + '.' + DD + ' ' + DW + ' ' + hh + ':' + mm + ':' + ss + ' ';
document.getElementById("Clock1").innerHTML = RTime1;
}
function set0(num) {
var ret;
if( num < 10 ) { ret = "0" + num; }
else { ret = num; }
return ret;
}
</script>


補足説明

日時表示エリアとして、<p>タグを使用しています
通常、<p>タグを入れると改行が入りますが、ここでは改行させない為、style="display: inline" を追記しています
setInterval('showClock1()',1000); は、showClock1()関数(この行の直下で定義しています)を、インターバル1000ミリセックで実行せよ指示文です
その下で定義している、set0 関数は、入力された数字(月、日等)が1桁だった場合、前に0を付ける(例えば、8だったら08にする)ためのものです





リアルタイム日時表示2



普通に日時を表氏する場、上記、、「リアルタイム日時表示1」のやり方の方が適していると思いますので、こちらは、こんなやり方でもできるよ、程度の参考例です

HTMLソース上で、ホームページ内、<head>部、<body>タグ内、<body>部に、それぞれ埋め込んで下さい
<head>部 JavaScript プログラムで、1秒置きに、現在日時を算出、<body>タグ設定にて、<head>部プログラムの初期起動、<body>部にて、算出結果の表示を行っています


<head>部 <script language="javascript">
<!--
function time()
{

var DWs = new Array('Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.');
var Now = new Date();
var YY = Now.getYear();
var MM = Now.getMonth()+1;
var DD = Now.getDate();
var DW = DWs[Now.getDay()];
var hh = Now.getHours();
var mm = Now.getMinutes();
var ss = Now.getSeconds();

if(YY < 2000) { YY += 1900; }

if(MM < 10) { MM = "0" + MM; }
if(DD < 10) { DD = "0" + DD; }
if(hh < 10) { hh = "0" + hh; }
if(mm < 10) { mm = "0" + mm; }
if(ss < 10) { ss = "0" + ss; }

document.rt.tokei.value= YY +" "+ MM +" "+ DD +" "+ DW +" "+ hh +":"+ mm +":"+ ss;
setTimeout('time()',1000);

}
// -->
</script>

<body> タグ <body onload="time();">

<body> 部 <form name="rt" method="POST" style="display: inline"><input type="text" name="tokei" size="21" style='font-size : 100%;font-family : "Times New Roman";border-style : none;'></form>




<form> 補足説明

<form>は入力・送信フォームを作成する際に使用するタグです
<form></form>の間に、 <input> 、<select> 、<textarea>等のタグにより、 一行テキストボックス、ボタン、チェックボックス、ラジオボタン、セレクトボックス、スクロールテキストボックス等の部品を配置します

<form>タグは、ブロック要素なのでそのままだと前後で改行されます
前後と同一行に表示したい(改行させない)場合、<form>タグに style="display: inline" を追記して、<form style="display: inline">と記述します

フォームに入力されたデータは、送信ボタンを押すことでCGIプログラム等へ送信され、一定の処理が行われます
その際の送信先は、action 属性で、転送方法は、method 属性で、データ形式は、enctype 属性でそれぞれ指定します


<form> 属性

action="URI" 送信先プログラムのURIを指定する
method="HTTPメソッド" 送信の際の転送方法(HTTPメソッド)を指定する
enctype="MIMEタイプ" 送信の際のデータ形式(MIMEタイプ)を指定する
accept-charset="文字セット" CGIプログラム等のデータの受け側で、受付可能な文字セットを指定する
accept="MIMEタイプ" CGIプログラム等のデータの受け側で、処理可能なMIMEタイプを指定する
name="名前" スクリプト言語などから参照できるよう名前を指定する
target="フレーム名" フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する



<input> 補足

ここでは、<head> 部、JavaScript で求めた、日時を、テキストボックスに埋め込み表示しています
上の例の「ページを開いた時の日時表示」で、直接 body 部に、JavaScript で出力した場合とでは、デフォルトフォントが異なるため、Windows パソコンで、IE (Internet Explorer) を使用した際のデフォルトフォント「 Times New Roman 」で出力するよう指定しています

  style='font-size : 100%;font-family : "Times New Roman";


テキストボックスの枠線を消すため、「 border-style : none;' 」を指定しています

  style='border-style : none;'



Windows 8.1 ブラウザ毎使用フォント例


Internet Explorer 11.0

Chrome 30.0
半角文字 全角文字 半角文字 全角文字
無指定(デフォルト) Times New Roman MS Pゴシック MS Pゴシック
serif MS P明朝 MS P明朝
sans-serif メイリオ MS Pゴシック
cursive Comic Sans MS MS Pゴシック Comic Sans MS MS Pゴシック
fantasy Gabriola MS Pゴシック Impact MS Pゴシック
monospace Courier New MS ゴシック MS ゴシック

Opera17.0

Firefox 25.0
半角文字 全角文字 半角文字 全角文字
無指定(デフォルト) MS Pゴシック MS Pゴシック
serif MS P明朝 MS P明朝
sans-serif MS Pゴシック MS Pゴシック
cursive Comic Sans MS MS Pゴシック Microsoft Sans Serif MS Pゴシック
fantasy Impact MS Pゴシック Microsoft Sans Serif MS Pゴシック
monospace MS ゴシック MS ゴシック MS ゴシック


「 serif 」は、ローマン体や明朝体、「 sans-serif 」は、ゴシック体やサンセリフ体、「 cursive 」は、筆記体などの手書き系、「fantasy 」は、装飾フォント系、「 monospace 」は、等幅フォントです
標準では手書き系・装飾系の日本語フォントはありません


目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > JavaScript 日付・時刻をリアルタイム表示する 時計の作り方
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP