目次
1. 前回投稿
2. 概要
htmlファイルだけでリアルタイムに時刻と干支を表示させるプログラミングを作成。
この時刻表示は普通ではありません。
作成理由
箸休め的にrailsチュートリアル以外でやってみたことを投稿
html単体で時刻と干支を表示させてみました。
きっかけは聖飢魔IIが好きな知り合いのユーチューブライブを見ていた際、
時刻をhtmlファイルを使ってライブ画面に時刻を表示させてみたい
という一言から作ってみました。
聖飢魔IIは魔歴表示でカウントされるので
ただの時刻表示ではなく、知り合いの好みに合わせた時刻表示にさせてみました。
3. 内容
作成したもの
悪魔干支は13種類なんですね。
そのため、var eto = now.getFullYear()%13 こちらを13で余を計算。
普通の干支にしたい場合は配列内容とgetFullYearの割る数字を変更すれば表示できます。
文字化けする場合は meta charset="UTF-8" の UTF-8 を
Shift_JIS、EUC-JP などに変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="100%"><b>
<span id="view_clock"></span>
<script type="text/javascript">
timerID = setInterval('clock()',500); //0.5秒毎にclock()を実行
function clock() {
document.getElementById("view_clock").innerHTML = getNow();
}
function getNow() {
var now = new Date();
var year = now.getFullYear();
var mon = now.getMonth()+1; //１を足すこと
var day = now.getDate();
var hour = ("0" + (now.getHours())) .slice(-2);
var min = ("0" + (now.getMinutes())) .slice(-2);
var sec = ("0" + (now.getSeconds())) .slice(-2);
var you = now.getDay(); //曜日(0～6=日～土)
var eto = now.getFullYear()%13
//曜日の選択肢
var youbi = new Array("日","月","火","水","木","金","土");
//干支の選択肢
var etomareki = new Array("妖精","河童","つちのこ","三ツ首竜","鵺","一角獣","モグラザメ","化猫","蝦蟇","火の鳥","怪奇植物","人魚","夜叉");
//出力用
var s = "D.C."+(year-1998)+ "(" + year + ")" + "年" + mon + "月" + day + "日 (" + youbi[you] + ")" + hour + "時" + min + "分" + sec + "秒" + "<br>" + "悪魔干支 "+etomareki[eto];
return s;
}
</script>
</b></font>
</body>
</html>
4. おわりに
以下の参考URLを見て作成してみました。
検索力が前より向上したのではないかと思う。
参考URL