初めに
年の瀬に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 = " 【西郷隆盛のことば】<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/10/21(日)
09:30:15
最後に
12日間の短いオンラインカレンダーです。上記コードを拡張していのしし年365日絵ごよみに挑戦してはいかがでしょうか。