月めくりカレンダーに応用
一年、月ごとの風景画を自動的に表示することを考えています。それには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>
月めくりへの改造点
- setIntervalによる繰り返し処理は削除。
- ウィジェット欄の日めくりカレンダーに月めくり機能を追加するには、年月の月を表示している数値を12個の画像ファイルに引き当てて月ごとの画像を表示する。
- 画像のロード完了イベントに月ごとの画像表示を取り付ける。
大盤振る舞いのプレゼント
当ブロブの考え方は「獲った魚をふるまうことよりも魚の獲り方を開示する」にあります。つまり、解答よりも解答にたどり着く方法を語っていますが、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]+"曜日"+" "+" <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>