| 簡易日時表示 |
|
ページを開いた時の、日付・時刻を表示します |
|
|
|
| リアルタイム日時表示１ |
|
リアルタイムで、日付・時刻を更新表示します |
|
|
|
| リアルタイム日時表示２ |
|
リアルタイムで、日付・時刻を更新表示します |
|
|
リアルタイム日時表示１ と リアルタイム日時表示２、それぞれ独立して、１秒間のインターバルを取って処理しているため、それぞれの更新時間がコンマ数秒ずれています
インターバルタイムを小さくすれば、その分ずれも小さくなるのですが、コンマ数秒のずれが問題となるケースは、通常ないと覆いますので、負荷を考慮し、現状としています
簡易日時表示
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> |
リアルタイム日時表示１
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()関数（この行の直下で定義しています）を、インターバル１０００ミリセックで実行せよ指示文です
その下で定義している、set0 関数は、入力された数字（月、日等）が１桁だった場合、前に０を付ける（例えば、8だったら08にする）ためのものです
リアルタイム日時表示２
普通に日時を表氏する場、上記、、「リアルタイム日時表示１」のやり方の方が適していると思いますので、こちらは、こんなやり方でもできるよ、程度の参考例です
HTMLソース上で、ホームページ内、<head>部、<body>タグ内、<body>部に、それぞれ埋め込んで下さい
<head>部 JavaScript プログラムで、１秒置きに、現在日時を算出、<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 |
ＭＳ Ｐゴシック |
ＭＳ Ｐゴシック |
| serif |
ＭＳ Ｐ明朝 |
ＭＳ Ｐ明朝 |
| sans-serif |
メイリオ |
ＭＳ Ｐゴシック |
| cursive |
Comic Sans MS |
ＭＳ Ｐゴシック |
Comic Sans MS |
ＭＳ Ｐゴシック |
| fantasy |
Gabriola |
ＭＳ Ｐゴシック |
Impact |
ＭＳ Ｐゴシック |
| monospace |
Courier New |
ＭＳ ゴシック |
ＭＳ ゴシック |
|
Opera17.0
|
Firefox 25.0
|
|
半角文字 |
全角文字 |
半角文字 |
全角文字 |
| 無指定（デフォルト） |
ＭＳ Ｐゴシック |
ＭＳ Ｐゴシック |
| serif |
ＭＳ Ｐ明朝 |
ＭＳ Ｐ明朝 |
| sans-serif |
ＭＳ Ｐゴシック |
ＭＳ Ｐゴシック |
| cursive |
Comic Sans MS |
ＭＳ Ｐゴシック |
Microsoft Sans Serif |
ＭＳ Ｐゴシック |
| fantasy |
Impact |
ＭＳ Ｐゴシック |
Microsoft Sans Serif |
ＭＳ Ｐゴシック |
| monospace |
ＭＳ ゴシック |
ＭＳ ゴシック |
ＭＳ ゴシック |
「 serif 」は、ローマン体や明朝体、「 sans-serif 」は、ゴシック体やサンセリフ体、「 cursive 」は、筆記体などの手書き系、「fantasy
」は、装飾フォント系、「 monospace 」は、等幅フォントです
標準では手書き系・装飾系の日本語フォントはありません
|