日別アーカイブ: 2019-01-08

日本の季節12景

月めくりカレンダーに応用

一年、月ごとの風景画を自動的に表示することを考えています。それには12枚の画像を用意して2秒間隔で表示するアプリを作りました。

 

動作例

準備中

サンプルコード

<div id="mon" style="width:100px; height:40px;font-size:32px; color:green;">準備中</div>
<div style="height:128px; border:0px solid red;"><img id="picImage" width="128" height="128"</div>
<script type="text/javascript">
	var m = 0;
	setInterval(calendarView, 2000);
function calendarView(){
	var f = "abcdefghijkl".substr(m%12, 1);
	console.log('画像ファイル読み込み起動', m%12, f);
	document.getElementById('mon').innerHTML = "\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC".substr(m++%12,1)+"月";
	document.getElementById('picImage').src = "https://aidesign.lolipop.jp/wp-content/uploads/2019/01/pic12Middle-" + f + ".png";
}
</script>

 

月めくりへの改造点

  1. setIntervalによる繰り返し処理は削除。
  2. ウィジェット欄の日めくりカレンダーに月めくり機能を追加するには、年月の月を表示している数値を12個の画像ファイルに引き当てて月ごとの画像を表示する。
  3. 画像のロード完了イベントに月ごとの画像表示を取り付ける。

大盤振る舞いのプレゼント

当ブロブの考え方は「獲った魚をふるまうことよりも魚の獲り方を開示する」にあります。つまり、解答よりも解答にたどり着く方法を語っていますが、2019年の早春を祝って解答例をお年玉として示します。

<Div style="float:left; width:128px; height:128px; font-weight:bold; border:0px navy solid; margin-top:0px;">
<div id="ym" style="width:128px; height:28px; font-size:16px; border:0px red solid;"></div>
<div id="dy" style="width:128px; height:60px; font-size:40px; text-align:center; vertical-align:middle; display:table-cell;"></div>
<div id="s6" style="width:128px; height:40px; font-size:13px; border:0px blue solid;"></div>
</Div>
<div style="float:left; width:128px; height:128px; border:0px solid red;"><img id="picImage" src="" width="128" height="128" alt="yet"></div>
<div id="dummy" style="clear:both;"></div>
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2017/11/DevelopingTools2.js" charset="UTF-8"></script>
<script type="text/javascript" charset="Shift_JIS">
var now, year, mon, day, you;
var youbi = ["日","月","火","水","木","金","土"];								//曜日の選択肢
	month = [0, 31, 59, 90, 120, 151, 181, 212, 243, 274, 304, 334];			//通算日算出表
	now = new Date(/*"2020-03-01"*/);											//日付と時間の設定
	year = now.getYear();														//1900年からの経過年数
	mon = now.getMonth();														//今日の月(0~11)
	day = now.getDate();														//今日の日
	you = now.getDay();															//今日の曜日
	if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)){						//グレゴリオ暦のうるう年か
		for(var j=2; j<12; ++j)	month[j]++;										//うるう年だから通算日算出表を修正
	}
	var ym = (1900+year)+"年"+('0'+(mon+1)).slice(-2)+"月";						//YYYY年MM月
	var s6 = youbi[you]+"曜日"+"&nbsp;"+"&nbsp;<span style='color:red;'>"+(month[mon]+day-1)+"</span>";
	document.getElementById("ym").innerHTML = ym;								//年月
	document.getElementById("dy").innerHTML = day;								//日
	document.getElementById("s6").innerHTML = s6+"<BR><span style='color:darkmagenta;'>"+BrowsN[getBrowser()]+"</span>";	//ブラウザの表示
	document.getElementById('picImage').onload = function() {					//読み込み完了のイベント関数
		console.log('読み込み完了', document.getElementById('picImage').src, ym, day, s6);
    };
	var f = "abcdefghijkl".substr(mon, 1);										//12個のファイルを引き当てる
	console.log('画像ファイル読み込み起動', mon, f);
	document.getElementById('picImage').src = "https://aidesign.lolipop.jp/wp-content/uploads/2019/01/pic12Middle-" + f + ".png";
</script>