はじめに
**○分間と決めて作業しよう！**って思っていたけれど、いつの間にか時間が経っていることが非常に多かったため、アラームを作ることにしました。
また、
「javascript アラーム」
「JavaScript 音 鳴らす」
と検索しても思うようなものが出てこなかったので記事を書くことにしました。
コード
（CSSは添付してません。）
index.html↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイマー</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<p>タイムリミットまで<br>あと</p>
<div id="timer">00：00.000</div>
<div class="controls">
<button id="m" class="min">Min</button>
<button id="s" class="min">Sec</button>
<button id="r" class="min">Reset</button>
<button id="sta" class="min">Start</button>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
main.js↓
(function() {
'use strict';
//定義
var timer = document.getElementById('timer');
var min = document.getElementById('m');
var sec = document.getElementById('s');
var reset = document.getElementById('r');
var start = document.getElementById('sta');
//この下で定義しているものを使ってカウントダウンする
var startTime;
var timeLeft;
var timeToCountDown = 0;
var timerId;
var isRunning = false;
//現在時刻を代入し、表示の仕方を設定
function updateTimer(t){
var d = new Date(t); //現在時刻
var m = d.getMinutes();
var s = d.getSeconds();
var ms = d.getMilliseconds();
m = ('0' + m).slice(-2); //「０」が表示される桁を設定
s = ('0' + s).slice(-2);
ms = ('00' + ms).slice(-3);
timer.textContent = m + ':' + s + '.' + ms; //表示される文字列を設定
}
//カウンドダウン処理
function countDown(){
timerId = setTimeout(function(){
timeLeft = timeToCountDown - (Date.now() - startTime); //現在時刻から開始時間を引いて、さらに終わり時間から引くことで残り時間を算出している
updateTimer(timeLeft);
if(timeLeft < 0){
open( "アラーム時に起動するURLを貼る", "_blank") ; //カウントダウンが０になるとこのURLが開く
isRunning = false;
start.textContent = 'start';
clearTimeout(timerId);
timeLeft = 0;
timeToCountDown = 0;
updateTimer(timeLeft);
return;
}
countDown();
},10);
}
//スタートとストップの処理
start.addEventListener('click',function() {
if (isRunning === false){
isRunning = true;
start.textContent = 'stop';
startTime = Date.now();
countDown();
}else{
isRunning = false;
start.textContent = 'start';
timeToCountDown = timeLeft;
clearTimeout(timerId);
}
});
//分入力の処理
min.addEventListener('click',function() {
if(isRunning === true){
return;
}
timeToCountDown += 60 * 1000;
if (timeToCountDown >= 60 * 60 *1000){
timeToCountDown = 0;
}
updateTimer(timeToCountDown);
});
//秒入力の処理
sec.addEventListener('click',function() {
if(isRunning === true){
return;
}
timeToCountDown += 1000;
if (timeToCountDown >= 60 * 60 *1000){
timeToCountDown = 0;
}
updateTimer(timeToCountDown);
});
//リセット処理
reset.addEventListener('click',function() {
timeToCountDown = 0;
updateTimer(timeToCountDown);
});
})();
解説
簡単にこのアラームを説明すると、
（60分未満の）時間を設定し、その時間になると指定したURLを開く仕組みになっています
なので、**○分頑張ったらこの動画を見よう！**っていう感じに設定しても良いと思います。
残り時間表示の計算式については、
「設定した全体時間ー（開始時間＋現在時間）＝残り時間」
の式で表示しています
補足
0秒の時点でスタートしてしまうとURLが開いちゃいます…
また、入力についてもキーボード入力できない仕様です；；
いつかできるようにします😂
最後に
初投稿でぎこちないです…
詳しくコード中身を解説できたり、ここをこうするとどうなるなどの補足が入った記事を書いていけるよう精進します。