日別アーカイブ: 2018-12-20

年の瀬オンライン絵ごよみ

初めに

年の瀬に12日間のはかないオンラインカレンダーを作ってみました。0時0分0秒にイラスト今日のひとことが切り替わります。JavaScriptプログラミングコード付きです。

日替わりのBGMをサポートするなどして味のあるオンラインカレンダーに変身させてください。

 

絵ごよみ作成イメージ

 

絵ごよみJavaScriptプログラミングコード

<!DOCTYPE html>
<html lang="ja">
<head>
<title>2018年の瀬オンラインカレンダー</title>
<style type="text/css">
</style>
</head>
<body onload="start();">
<h2>2018、年の瀬オンラインカレンダー</h2>
<Div style="font-size:13px;"><img id="calendar" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/12/2018-12.png" width="630" height="225">
</Div>
西郷隆盛のことばは<a HREF="http://iyashitour.com/archives/21556#page1">癒しツアー</a>を参照
<DIV style="position:relative;">
<div id="clk2" style="position:absolute; left:10px; top:115px; font-size:13px; color:darkgreen; font-weight:bold;">2018/10/21(日)</div>
<div id="clk3" style="position:absolute; left:10px; top:165px; font-size:22px; color:mediumblue; font-weight:bold;">09:30:15</div>
<div id="bun" style="position:absolute; left:370px; top:20px; font-size:18px; background:azure; resize:none; width:240px; height:220px;"></div>
<canvas id="sample2" width="630" height="245" style="background-color:burlywood;"></canvas>
</DIV>
<script type="text/javascript">
const msg12 = [
"もうここらでよか。",
"敬天愛人(けいてんあいじん)。",
"命もいらぬ、名もいらぬ、官位も金もいらぬ。",
"策略は日常的にすることではない。",
"正しい道を踏み、国とともに倒れてもよいというほどの精神がなければ、外国との交際を成し遂げることはできない。",
"過去の功績のご褒美として役職につけるのは、善くないことの第一である。",
"政治で特に大切なことは、教育文化を盛んにし、軍備を充実させ、農業を奨励するという三つである。",
"何度も何度もつらく苦しい経験をしてこそ、人の志は初めて堅くなるのだ。",
"過ちを改めるには、自分が間違いを犯したと自覚すれば、それでよい。",
"大きなことでも、小さなことでも、道理にかなった正道を踏み、真心を尽くし、決して策略を用いてはならない。",
"主君への忠義と親への孝行、他人にめぐみいつくしむという徳目の実践を促すことこそ、政治の基本である。",
"己れに克つための極意は、論語にある「意なし、必なし、固なし、我なし」ということだ。"
];
var ctx, cvs, img, day=tday=0;
function start() {
	cvs = document.getElementById("sample2");																//canvas要素
	ctx = cvs.getContext('2d');
	img = new Image();																						//画像オブジェクトを生成
	img.src = "https://aidesign.lolipop.jp/wp-content/uploads/2018/12/2018-12.png";						//画像イメージを設定
	setInterval('timerX()', 1000);																			//デジタル時計
}
function timerX(){																							//年月日(曜日) 時分秒
  var nowTime = new Date();																					//日付情報
  day = nowTime.getDate();																					//日を抽出
  var ymd = nowTime.getFullYear() + "/" + letter2(nowTime.getMonth()+1) + "/" + letter2(day);				//年 月 日
  document.getElementById("clk2").innerHTML = ymd + "("+"日月火水木金土".substr(nowTime.getDay(),1) + ")";	//曜日(0-6)
  document.getElementById("clk3").innerHTML = letter2(nowTime.getHours())+":"+letter2(nowTime.getMinutes())+":"+letter2(nowTime.getSeconds());
  if(tday != day){										//00:00:00の日変わり
	tday = (day < 20) ? 0 : day - 20;
	var x = tday % 6;
	var y = Math.floor(tday / 6);
	var ms = "&emsp;【西郷隆盛のことば】<BR><BR>" + msg12[tday];
	console.log("W, H", img.width, img.height, cvs.width, cvs.height, day, tday, x, y, ms);
	document.getElementById("bun").innerHTML = ms;
	ctx.drawImage(img, x*140, y*150, 140, 150, 140, 10, 210, 225);	//2018年末12日間の絵カレンダー
	tday = day;
  }
}
function letter2(num) {return ("0" + num ).slice(-2);}			<!-- send "01" -->
</script>
</body>
</html>

 

絵ごよみのサンプル

2018年の瀬オンラインカレンダー

2018、年の瀬オンラインカレンダー

西郷隆盛のことばは癒しツアーを参照
2018/10/21(日)
09:30:15

最後に

12日間の短いオンラインカレンダーです。上記コードを拡張していのしし年365日絵ごよみに挑戦してはいかがでしょうか。