HTML勉強メモ

HTMLやJavaScriptなどのことについて書いています。

トップ > JavaScript > 時刻をリアルタイムで更新させる方法

時刻をリアルタイムで更新させる方法

JavaScript HTML

時刻をリアルタイムで更新させる場合

現在の時刻を表示する方法
htmlst.hatenablog.jp

曜日も表示させる方法
htmlst.hatenablog.jp

コードを追加することで、時刻をリアルタイムで更新させることができる。

追加する記述

timer = setInterval('clock()',1000); //時刻の更新

function clock() {
	document.getElementById("viewTime").innerHTML = getNow();
}

曜日を表示させたものに、現在の時刻をリアルタイムで更新させるようにしたもの。

（使用例）

<body>
<span id="viewTime"></span>

<script type="text/javascript">
timer = setInterval('clock()',1000); //時刻の更新

function clock() {
	document.getElementById("viewTime").innerHTML = getNow();
}

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

	//曜日の配列（日～土）
	var youbi = new Array("日","月","火","水","木","金","土");
	//出力用
	var s = year + "年" + mon + "月" + day + "日 (" + youbi[you] + ")"+ hour + "時" + min + "分" + sec + "秒" ;
	return s;
}
</script>
</body>

実行した場合、一秒ずつ時刻が更新されていく。

「2017年2月21日(木)00時00分00秒」
↓
「2017年2月21日(木)00時00分01秒」
↓
「2017年2月21日(木)00時00分02秒」

まとめ

記述の追加を行うことで、時刻をリアルタイムで更新することができる。