javascript基本２－定期的な表示変更

ＷＥＢサイトで、画像や時刻などを「見ている間にも定期的に更新」したいという場合があります。
そのためのＪａｖａＳｃｒｉｐｔを学びます。

setInterval

定期的な「入れ替え」を実施するには「setInterval(function）」を使用します。
概略の形式は、下記になります。

setInterval(function(){
　　　処理
},1000);
//    1000ミリ秒＝１秒ごとに繰り返し

サンプル（バナー広告の定期的な入れ替え）

	// バナー広告を定期的に入れ替え
	setInterval(function(){
		// 広告設定
		var cm = [ ];
		cm["images/banner.png"] = "images/banner2.png";
		cm["images/banner2.png"] = "images/banner.png";
		// img要素を読み出し
		var img = document.querySelectorAll("aside img")[0];
		// 属性値を入れ替え
		img.src = cm[img.getAttribute('src')];
	}, 1000);

説明
１）配列の準備をしています。　var cm = [ ];
２）配列の添え字として、画像のURLを指定して、その値として入れ替えるべき画像を設定しています。
３）現在の画像URLをgetAttributeで読み出し、それを配列の添え字として使用します。
＊　画像は　＜ａｓｉｄｅ＞～＜／ａｓｉｄｅ＞の中で、＜ｉｍｇ＞と指定してあります。

<aside>
<div><img src="images/banner.png" width="200" height="200" alt="広告"></div>
</aside>

演習１
上記を参考に、画像を準備して、画像を入れ替える処理を実施してください。

演習２
１）日付－時刻（時分秒）を＜ｔｉｍｅ＞要素に表示します。
２）その、時刻表示部分を１秒おきに変化させて、現在の日付と時刻を表示してください。

時	★.getHours()	0～23
分	★.getMinutes()	0～59
秒	★getSeconds()	0～59

整形のヒント

if (m < 10) { m = '0' + m; } 
if (d < 10) { d = '0' + d; }