現在の日時を表示する

赤字:JavaScriptの命令や重要なタグ/青字:用途に応じて変更する部分/緑字:変更可能な変数名やユーザー関数名


戻る

実例

例文

<span id="view_time"></span>

<script type="text/javascript">
document.getElementById("view_time").innerHTML = getNow();

function getNow() {
	var now = new Date();
	var year = now.getFullYear();
	var mon = now.getMonth()+1; //1を足すこと
	var day = now.getDate();
	var hour = now.getHours();
	var min = now.getMinutes();
	var sec = now.getSeconds();

	//出力用
	var s = year + "" + mon + "" + day + "" + hour + "" + min + "" + sec + ""; 
	return s;
}
</script>

解説

new Date でコンピュータから日付と時間を取得し変数nowへ入れ、その後、日付と時間の各変数へ西暦などの数値を取り出しています。
次にそれらを文字と組み合わせて1つの文章を作り、これを変数msgへ入れ、最後にHTMLの文章として表示をしています。
getMonthには月を示す数値が入るのですが、実際の月よりも1つ少なく、0~11で表されます。そのため何月と表示させたいときには、1を足す必要があります。

応用 - リアルタム更新

リアルタイムに時間を更新します。

ここでは、関数setIntervalを使って、時間の表示を0.5秒毎に呼び出しています。
もちろん、タイマーを1秒毎に呼び出して、1秒を刻むことはできます。しかし、処理に遅延が生じたとき、表示されない1秒が出てくることがあるのです。
タイマーは1/1000秒単位で時間を計測して、それを1秒単位になるように小数点以下を切り捨てて表示しています。通常であれば「0秒」の次は「1秒」になりますが、「0.999秒」から1秒後に「0.002秒」の遅延が発生すると「2.001秒」になり、これを1秒単位で表示していると「0秒」の次が「2秒」になります。
そのため、タイマーの表示誤差を0.5秒以内に納めるため、更新間隔を0.5秒にしているのです。

スクリプトは必ずフォームや表示位置の後ろに記述してください。

<span id="view_clock"></span>
<script type="text/javascript"> timerID = setInterval('clock()',500); //0.5秒毎にclock()を実行 function clock() { document.getElementById("view_clock").innerHTML = getNow(); } function getNow() { var now = new Date(); var year = now.getFullYear(); var mon = now.getMonth()+1; //1を足すこと var day = now.getDate(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); //出力用 var s = year + "" + mon + "" + day + "" + hour + "" + min + "" + sec + ""; return s; } </script>

応用 - 曜日の表示

曜日の表示を付け足してみましょう。

先ほどのユーザー関数getNowの後半を変更し、ユーザー関数getTodayとしました。
曜日は関数getDayで数値として取得できるので、0なら日曜日、6なら土曜日となります。配列変数youbiを利用しています。

<span id="view_today"></span>
<script type="text/javascript"> document.getElementById("view_today").innerHTML = getToday(); function getToday() { var now = new Date(); var year = now.getFullYear(); var mon = now.getMonth()+1; //1を足すこと var day = now.getDate(); var you = now.getDay(); //曜日(0~6=日~土) //曜日の選択肢 var youbi = new Array("","","","","","",""); //出力用 var s = year + "" + mon + "" + day + "日 (" + youbi[you] + ")"; return s; } </script>

応用 - 英語表記

月名を外国語表記にしたい場合、上記の曜日の手順を応用して、配列変数から月名を引き出します。
そのため、月数である変数monの値には1を足さず、そのまま使うことに注意してください。これは配列変数では最初が0番になるからです。

<span id="view_todayE"></span>
<script type="text/javascript"> document.getElementById("view_todayE").innerHTML = getTodayE(); function getTodayE() { var now = new Date(); var year = now.getFullYear(); var mon = now.getMonth(); //1足さない var day = now.getDate(); var you = now.getDay(); //曜日(0~6=日~土) //曜日の選択肢 var youbi = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); //月名の選択肢 var month = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); //出力用 var s = month[mon] + " " + day + ", " + year + " (" +youbi[you] + ")"; return s; } </script>

上記は米国式であり、英国式の場合は、「日付」「月名」「西暦」の順になります。また、日付は序数(1st, 2nd, 3rd, 4th...)で表します。

英国式の場合、出力前に下記の処理を追加します。

	//英国式
	if (day == 1) day = day + "st"; 
	else if (day == 2) day = day + "nd";
	else if (day == 3) day = day + "rd";
	else day = day + "th";

英国式の出力順は以下のようになります。

	var s = day + " " + month[mon] + ", " + year + " (" +youbi[you] + ")";

応用 - 仏語表記

フランス語表記では、英語表記とは曜日や日付を出力する順序が異なります。

<span id="view_todayF"></span>
<script type="text/javascript"> document.getElementById("view_todayF").innerHTML = getTodayF(); function getTodayF() { var now = new Date(); var year = now.getFullYear(); var mon = now.getMonth(); //1足さない var day = now.getDate(); var you = now.getDay(); //曜日(0~6=日~土) //曜日の選択肢 var youbi = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samdi"); //月名の選択肢 var lune = new Array("janvier","f&#233;vrier","mars","avril","mai","juin","juillet","ao&#251;t","septembre","octobre","novembre","d&#233;cembre"); //出力用 var s = youbi[you] +" "+ day + " " + lune[mon] + ", " + year; return s; } </script>

戻る