寒くなってきましたね、武田です。
ひたちなか情報電子専門学院のとある教室はチャイムが鳴りません。ときどき授業時間を過ぎて授業を続けていることがあるため、チャイムを鳴らすプログラムを作ってみました。
クリックで別ウインドウ表示（実行はチャイム音が鳴るので注意！）
チャイム時刻の設定はいくつでもできます。
HTML5の機能であるローカルストレージ機能をつけると一度設定したチャイム時刻の保存も出来ると思います。間違って設定したチャイム時刻を削除する機能もつけたいですね。
時は金なり。
以下、プログラムです。
HTML部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle.css">
<script src="chime.js"></script>
<title>チャイムver1.0</title>
</head>
<body>
<h1>チャイム</h1>
<form name="formChime">
<p>
<!-- 時 -->
<select name="hour">
<script>
for(var i=1; i<=24; i++){
var hour = addZero(i);
document.write("<option value='" + hour + "'>" + hour + "</option>");
}
</script>
</select>
時
<!-- 分 -->
<select name="minute">
<script>
for(var i=0; i<=59; i++){
var minute = addZero(i);
document.write("<option value='" + minute + "'>" + minute + "</option>");
}
</script>
</select>
分
<input type="button" value="チャイムセット" onclick="setChime(document.formChime.hour.value, document.formChime.minute.value, '00')">
</p>
</form>
<div id="nowTime">
<p id="time">0</p>
</div>
<div id="chime">
</div>
</body>
</html>
JavaScript部分
/*
* チャイム ver 1.0
*/
// 現在時刻表示用
var hour;
var minute;
var second;
// チャイム関係
var frame = 0;
var isPlaying = false;
var chimeNo
var chimeTimes = new Array();
// 音源
var mp3 = new Audio();
mp3.preload = "auto";
mp3.src = "chime.mp3";
// ゼロ埋め（２桁にする）
function addZero(n){
n = Number(n) < 10 ? ("0" + n) : ("" + n);
return n;
}
// チャイムをセット
function setChime(_hour, _minute, _second){
var chime = {
hour: _hour,
minute: _minute,
second: _second
};
console.log(_hour + ":" + _minute + ":" + _second);
chimeTimes.push(chime);
console.log(chimeTimes);
showChimeTime();
};
// チャイム時刻をページに反映
function showChimeTime(){
var html = "<ul>\n";
for(i in chimeTimes){
console.log("i: " + i);
html += "<li class='border'>" + chimeTimes[i].hour + ":" + chimeTimes[i].minute + ":" + chimeTimes[i].second + "</li>\n";
}
html += "</ul>";
document.getElementById("chime").innerHTML = html;
};
// チャイムを鳴らす
function ringChime(){
isPlaying = true;
document.getElementsByTagName("li")[chimeNo].style.color = "red";
mp3.play();
}
/**
* メイン
*/
function mainLoop(){
var now = new Date();
hour = now.getHours();
minute = now.getMinutes();
second = now.getSeconds();
// 0埋め
hour = addZero(hour);
minute = addZero(minute);
second = addZero(second);
var nowTime =hour + ":" + minute + ":" + second;
document.getElementById("time").innerHTML = nowTime;
// チェック
for(i in chimeTimes){
if(hour == chimeTimes[i].hour && minute == chimeTimes[i].minute && second == chimeTimes[i].second){
chimeNo = i;
ringChime();
}
}
// 鳴っている間は赤く表示
if(isPlaying) frame++;
if(frame >30){
frame = 0;
isPlaying = false;
document.getElementsByTagName("li")[chimeNo].style.color = "#444";
}
setTimeout(mainLoop, 500);
};
window.onload = function(){
mainLoop();
}