トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ 現在時刻の表示

現在の時刻を取得するにはJavaScriptnew Date()関数を使用します。

その後、その変数から「年、月、日、時、分、秒」をそれぞれ取得します。
時差の取得には、その変数に秒単位の数値を加減算します。

なお、表示方法はいろんな方法がありますが、今回はフォームのテキスト入力を使用しました。

◆ 実行サンプル

現在の時刻 
時差の時刻 (8時間前)
時差の時刻 (8時間後)
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「ontim01.js」というファイル名で保存します。
tim_dsp(); function tim_dsp(){ stance = 8*60*60*1000; //8時間の時差 yobi = new Array("日","月","火","水","木","金","土") //現在の時刻の取得&表示 gtim0 = new Date(); mn0 = gtim0.getMonth() + 1; txt0 = ""; txt0 = txt0 + gtim0.getFullYear() + "年"; txt0 = txt0 + mn0 + "月"; txt0 = txt0 + gtim0.getDate() + "日"; txt0 = txt0 + "(" + yobi[gtim0.getDay()] + ")"; txt0 = txt0 + gtim0.getHours() + "時"; txt0 = txt0 + gtim0.getMinutes() + "分"; txt0 = txt0 + gtim0.getSeconds() + "秒"; document.frm1['tim0'].value = txt0; //8時間前の時刻の取得&表示 gtim0 = new Date(); gtim0.setTime(gtim0.getTime() - stance); mn0 = gtim0.getMonth() + 1; txt0 = ""; txt0 = txt0 + gtim0.getFullYear() + "年"; txt0 = txt0 + mn0 + "月"; txt0 = txt0 + gtim0.getDate() + "日"; txt0 = txt0 + "(" + yobi[gtim0.getDay()] + ")"; txt0 = txt0 + gtim0.getHours() + "時"; txt0 = txt0 + gtim0.getMinutes() + "分"; txt0 = txt0 + gtim0.getSeconds() + "秒"; document.frm1['tim1'].value = txt0; //8時間後の時刻の取得&表示 gtim0 = new Date(); gtim0.setTime(gtim0.getTime() + stance); mn0 = gtim0.getMonth() + 1; txt0 = ""; txt0 = txt0 + gtim0.getFullYear() + "年"; txt0 = txt0 + mn0 + "月"; txt0 = txt0 + gtim0.getDate() + "日"; txt0 = txt0 + "(" + yobi[gtim0.getDay()] + ")"; txt0 = txt0 + gtim0.getHours() + "時"; txt0 = txt0 + gtim0.getMinutes() + "分"; txt0 = txt0 + gtim0.getSeconds() + "秒"; document.frm1['tim2'].value = txt0; }


8時間前の時刻を取得したいときは、次のようにして求めます。 stance = 8*60*60*1000; //8時間の時差 gtim0 = new Date(); gtim0.setTime(gtim0.getTime() - stance); のように変更します。


そして、現在時刻などを表示する入力フォームJavascriptを次のように記述します。 <form name="frm1">
現在の時刻 <input type="text" size="40" style="text-align:center;" name="tim0"><br>
時差の時刻 <input type="text" size="40" style="text-align:center;" name="tim1">(8時間前)<br>
時差の時刻 <input type="text" size="40" style="text-align:center;" name="tim2">(8時間後)<br>
</form>
<script type="text/javascript" src="ontim01.js"></script>



page update:2019/01/09 19:55

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom