アラーム機能付きのデジタル時計を作るには？
ここではJavaScript/jQueryを使用してデジタル時計を作る方法を解説します。
なお、今回作成するデジタル時計にはHTMLのAUDIOタグを使用してアラーム機能をサポートします。
アラーム設定時の音声ファイルは３種類用意しています。お好みのアラーム音をドロップダウンリストから選択することができます。
アラーム音は[Reset]ボタンをクリックするまで無制限に再生されます。
アナログ時計に興味にある方は、「Article011」「Article012」で解説しています。
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article016.aspx」を作成します。
-
Webフォームのヘッダータグ内「<head>...</head>」にSTYLEタグを追加して以下のようなCSSを入力します。
Article016.aspx:
<style>
div.alarm-clock {
background-color: rgb(101 154 204 / 0.79);
border-collapse: collapse;
border-color: black;
border-style: solid;
border-width: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
width: 200px;
font-size: larger;
}
table {
font-family: Arial;
text-transform: uppercase;
}
div.digital-clock {
background-color: rgba(0, 0, 0, 0.8);
color: white;
width: 150px;
height:22px;
margin: auto;
padding: 0;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
}
</style>
-
Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryのライブラリーを取り込みます。
さらにSCRIPTタグを追加して、次のようなJavaScript/jQueryのコードを入力します。
Article016.aspx:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js" ></script>
<script type="text/javascript">
// jQuery Document Ready Event...
$(function () {
clock.init();
});
// Digital Clock
var clock = {
// INITIALIZE ALARM CLOCK
init: function () {
// GET THE CURRENT TIME - HOUR, MIN, SECONDS
clock.hour = $('.clock-hour')[0];
clock.min = $('.clock-min')[0];
clock.sec = $('.clock-sec')[0];
// CREATE TIME PICKER - HR, MIN, SEC
clock.selectHour = $('.alarm-hour')[0];
clock.createOption(clock.selectHour, 23);
clock.selectMin = $('.alarm-min')[0];
clock.createOption(clock.selectMin, 59);
clock.selectSec = $('.alarm-sec')[0];
clock.createOption(clock.selectSec, 59);
// CREATE TIME PICKER - SET, RESET
clock.buttonSet = $('#btnSet')[0];
$(clock.buttonSet).click(clock.set);
clock.buttonReset = $('#btnReset')[0];
$(clock.buttonReset).click(clock.reset);
// GET ALARM SOUND
clock.sound = document.getElementById('alarm-sound'); // DO NOT USE $('#alarm-sound')
clock.soundSource = document.getElementById('alarm-sound-source'); // DO NOT USE $('#alarm-sound-source')
clock.alarmSound = $('.alarm-sound')[0];
clock.soundSource.src = clock.alarmSound.value;
clock.sound.load();
// START THE CLOCK
clock.alarm = null;
setInterval(clock.tick, 1000);
},
// SUPPORT FUNCTION - CREATE SELECTOR FOR HR, MIN, SEC
createOption: function (selector, max) {
for (var i = 0; i <= max; i++) {
i = clock.padZero(i);
$(selector).append($('<option>',
{
value: i,
text: i
}
));
}
},
// SUPPORT FUNCTION - PREPEND HR, MIN, SEC WITH 0 (IF < 10)
padZero: function (num) {
if (num < 10) {
num = '0' + num;
}
else {
num = num.toString();
}
return num;
},
// UPDATE CURRENT TIME
tick: function () {
// CURRENT TIME
var now = new Date();
var hr = clock.padZero(now.getHours());
var min = clock.padZero(now.getMinutes());
var sec = clock.padZero(now.getSeconds());
// UPDATE HTML CLOCK
clock.hour.innerHTML = hr;
clock.min.innerHTML = min;
clock.sec.innerHTML = sec;
// CHECK AND SOUND ALARM
if (clock.alarm != null) {
now = hr + min + sec;
if (now == clock.alarm) {
if (clock.sound.paused) {
clock.sound.play();
}
}
}
},
// SET ALARM
set: function () {
clock.alarm = clock.selectHour.value + clock.selectMin.value + clock.selectSec.value;
clock.soundSource.src = clock.alarmSound.value;
clock.sound.load();
clock.selectHour.disabled = true;
clock.selectMin.disabled = true;
clock.selectSec.disabled = true;
clock.buttonSet.disabled = true;
clock.buttonReset.disabled = false;
clock.alarmSound.disabled = true;
},
// RESET ALARM
reset: function () {
if (!clock.sound.paused) {
clock.sound.pause();
}
clock.alarm = null;
clock.selectHour.disabled = false;
clock.selectMin.disabled = false;
clock.selectSec.disabled = false;
clock.buttonSet.disabled = false;
clock.buttonReset.disabled = true;
clock.alarmSound.disabled = false;
}
};
</script>
-
WebフォームにDIV要素を配置したらTABLEタグを追加してデジタル時計の雛形を作ります。
デジタル時計の時刻とアラームを設定するときの時刻はJavaScript/jQueryで実行時に生成します。
最後にHTMLのAUDIOタグを追加してデフォルトの音声ファイル「wake-up-sound.mp3」を設定します。
Article016.aspx:
<div class="alarm-clock">
<table border="0">
<tr><th>Digital Alarm Clock</th></tr>
<tr>
<th style="text-align:center">
<div class="digital-clock">
<span class="clock-hour"></span>:<span class="clock-min"></span>:<span class="clock-sec"></span>
</div>
</th>
</tr>
<tr><th>Set Alarm</th></tr>
<tr>
<th>
<select class="alarm-hour"></select>
<select class="alarm-min"></select>
<select class="alarm-sec"></select>
</th>
</tr>
<tr>
<th>
<input id="btnSet" type="button" value="Set" />
<input id="btnReset" type="button" value="Reset" />
</th>
</tr>
<tr>
<th>
Alarm Sound
<select class="alarm-sound">
<option value="●●●/analog-watch-alarm.mp3">Analog Watch Alarm</option>
<option value="●●●/wake-up-sound.mp3" selected="selected">Wake Up Sound</option>
<option value="●●●/yoyoma.mp3">Yo-Yo Ma</option>
</select>
</th>
</tr>
</table>
</div>
<audio id="alarm-sound" class="alarm-sound" loop="loop">
<source id="alarm-sound-source" src="●●●/wake-up-sound.mp3" type="audio/mp3" />
</audio>
プログラムの解説
-
ここでの解説は、下に表示されている行番号付きのコードを参照しながら読んでください。
サンプルコードがスクロールしないと見えないときはブラウザの新規ウィンドウを開いて２画面で見てください。
-
サンプルがブラウザに表示されるとjQueryの「Document Ready Event」が発生して3行目の「clock.init()」が実行されます。
-
clock.init()の16-21行目では「clock.createOption()」を呼び出して「時間」「分」「秒」のドロップダウンリストの項目(HTMLのoption要素)を生成しています。
-
25行と27行目では[Set]と[Reset]ボタンのクリック時のイベントを登録しています。
-
30-34行目ではアラーム音のドロップダウンリストからデフォルトの音声ファイル「wake-up-sound.mp3」を取得してHTMLのaudioの子要素sourceのsrc属性に設定しています。
30-31行目でHTMLのaudio要素とsouce要素を取得するとき、jQueryではなくJavaScriptの「document.getElementById()」を使用していますが、
これはjQueryでは正常に動作しないためです。
-
38行目では、JavaScriptのsetInerval()を使用して１秒間隔で発生するイベントを登録しています。これで１秒間隔で「clock.tick()」が実行されます。
-
90-100行目のclock.set()は、[Set]ボタンをクリックしたときに実行されます。
ここでは音声ファイルのドロップダウンリストからユーザーが選択した音声ファイルを取得してaudioの子要素sourceのsrc属性を更新しています。
94-99行目では[Reset]ボタンを有効にして[Set]ボタンや時刻を選択するドロップダウンリストを無効にしています。
-
103-114行目のclock.reset()は、[Reset]ボタンをクリックしたときに実行されます。
ここではアラーム音が鳴っているときはアラーム音をポーズ状態にします。
そして[Reset]ボタンを無効にして[Set]ボタンと時刻を選択するドロップダウンリストを有効にします。
-
clock.tick()の68-71行目では現在の時刻を取得しています。74-76行目ではデジタル時計の時刻（時間、分、秒）を更新しています。
79-86行目では現在の時刻がアラームで設定された時刻かどうかチェックしています。
アラームが設定された時刻なら83行目の「clock.sound.play()」を実行してアラームを鳴らします。
// jQuery Document Ready Event...
$(function () {
clock.init();
});
// Digital Clock
var clock = {
// INITIALIZE ALARM CLOCK
init: function () {
// GET THE CURRENT TIME - HOUR, MIN, SECONDS
clock.hour = $('.clock-hour')[0];
clock.min = $('.clock-min')[0];
clock.sec = $('.clock-sec')[0];
// CREATE TIME PICKER - HR, MIN, SEC
clock.selectHour = $('.alarm-hour')[0];
clock.createOption(clock.selectHour, 23);
clock.selectMin = $('.alarm-min')[0];
clock.createOption(clock.selectMin, 59);
clock.selectSec = $('.alarm-sec')[0];
clock.createOption(clock.selectSec, 59);
// CREATE TIME PICKER - SET, RESET
clock.buttonSet = $('#btnSet')[0];
$(clock.buttonSet).click(clock.set);
clock.buttonReset = $('#btnReset')[0];
$(clock.buttonReset).click(clock.reset);
// GET ALARM SOUND
clock.sound = document.getElementById('alarm-sound'); // DO NOT USE $('#alarm-sound')
clock.soundSource = document.getElementById('alarm-sound-source'); // DO NOT USE $('#alarm-sound-source')
clock.alarmSound = $('.alarm-sound')[0];
clock.soundSource.src = clock.alarmSound.value;
clock.sound.load();
// START THE CLOCK
clock.alarm = null;
setInterval(clock.tick, 1000);
},
// SUPPORT FUNCTION - CREATE SELECTOR FOR HR, MIN, SEC
createOption: function (selector, max) {
for (var i = 0; i <= max; i++) {
i = clock.padZero(i);
$(selector).append($('<option>',
{
value: i,
text: i
}
));
}
},
// SUPPORT FUNCTION - PREPEND HR, MIN, SEC WITH 0 (IF < 10)
padZero: function (num) {
if (num < 10) {
num = '0' + num;
}
else {
num = num.toString();
}
return num;
},
// UPDATE CURRENT TIME
tick: function () {
// CURRENT TIME
var now = new Date();
var hr = clock.padZero(now.getHours());
var min = clock.padZero(now.getMinutes());
var sec = clock.padZero(now.getSeconds());
// UPDATE HTML CLOCK
clock.hour.innerHTML = hr;
clock.min.innerHTML = min;
clock.sec.innerHTML = sec;
// CHECK AND SOUND ALARM
if (clock.alarm != null) {
now = hr + min + sec;
if (now == clock.alarm) {
if (clock.sound.paused) {
clock.sound.play();
}
}
}
},
// SET ALARM
set: function () {
clock.alarm = clock.selectHour.value + clock.selectMin.value + clock.selectSec.value;
clock.soundSource.src = clock.alarmSound.value;
clock.sound.load();
clock.selectHour.disabled = true;
clock.selectMin.disabled = true;
clock.selectSec.disabled = true;
clock.buttonSet.disabled = true;
clock.buttonReset.disabled = false;
clock.alarmSound.disabled = true;
},
// RESET ALARM
reset: function () {
if (!clock.sound.paused) {
clock.sound.pause();
}
clock.alarm = null;
clock.selectHour.disabled = false;
clock.selectMin.disabled = false;
clock.selectSec.disabled = false;
clock.buttonSet.disabled = false;
clock.buttonReset.disabled = true;
clock.alarmSound.disabled = false;
}
};
操作手順
-
サンプルが表示されるとデジタル時計が動作します。
-
アラームを設定するには「Set Alarm」の下に配置されているドロップダウンリストから「時間」「分」「秒」を選択します。
次に「Alarm Sound」の下に配置されているドロップダウンリストからお好みの音声ファイルを選択します。
デフォルトは「Wake Up Sound」です。
最後に[Set]ボタンをクリックすれば設定が完了します。
-
アラームを設定した時刻になるとアラーム音が鳴ります。アラーム音は[Reset]ボタンをクリックするまで無制限に繰り返し鳴ります。
-
アラームを解除するには[Reset]ボタンをクリックします。