JavaScriptでインターバルタイマーを作ってみた。

家にいる時間が長くなり集中力を持続させるのが難しくなってきました。そこで25分集中し、3~5分休むを繰り返すポモドーロ勉強法を導入したところ集中力は上がりましたが使っているタイマーに不満を覚えたのでhtml、css、javascriptでインターバルタイマーを作りました。

作成物

作ったインターバルタイマーはこちらからどうぞ。

インターバルタイマーintervaltimerlulu.com

使い方

画面は下記の通りです。

集中する時間と休憩する時間を入力した後にスタートを押すとカウントダウンが始まります。集中する時間が終了するとアラームがなり休憩時間に自動でカウントダウンが切り替わります。

リピートしたい場合はリピートボタンを押すと文字が「リピート」の文字が赤色に変わりカウントダウンが終了すると最初から始まります。

リセットを設定がリセットされます。

javascriptファイル

htmlはformで入力を受け取っているだけ、cssは表面の装飾だけなので省いています。

まだまだ汚いコードですが記録としてのせます。

アドバイスなどは暖かくお願いしますm(_ _)m

//jsフェイル
var timer1;
var timer2;
var break_flag = false;
var repeat_flag = false;
var stop_flag = false;
var min = "";
var sec = "";
var breakmin = "";
var breaksec = "";
var remaining_time = "";
var type="init"


function cutStart(){
 if(type=='init'){
   type='do';
 }
 document.timer.elements[4].disabled=true;
 document.timer.elements[5].disabled=false;
 init()
 if(stop_flag == false){
   min=document.timer.elements[0].value;
   sec=document.timer.elements[1].value;
   breakmin=document.timer.elements[2].value;
   breaksec=document.timer.elements[3].value;

   if( (min=="") && (sec==""))
   {
     alert("時刻を設定してください！");
     reSet();
   }else{
     if (breakmin!=""||breaksec!=""){
       if (breakmin=="") {
         breakmin=0;
         document.timer.elements[0].value=0;
       };
       breakmin=parseInt(breakmin);
             
       if (breaksec=="") {
         breaksec=0;
         document.timer.elements[1].value=0;
       };
       breaksec=parseInt(breaksec);
     }

     console.log(breakmin!=0);
     console.log(breaksec!=0);
     if(breakmin!=0||breaksec!=0){
       break_flag = true;
     }
     console.log(break_flag)


     if (min=="") {
       min=0;
       document.timer.elements[0].value=0;
     };
     min=Number(min);
     
     if (sec=="") {
       sec=0;
       document.timer.elements[1].value=0;
     };
     sec=Number(sec);
     
     remaining_time = min*60+sec;
     timer1=setInterval("countDown()",1000);
     }
 }else{
   if(timer2 == undefined){
     timer1=setInterval("countDown()",1000);
   }else{
     timer2=setInterval("countDown()",1000);
   }
 }
}

function cutStop(){
 document.timer.elements[4].disabled=false;
 document.timer.elements[5].disabled=true;
 document.getElementById("time-border").style.borderColor="#000"
 stop_flag = true;
 if(timer2 == undefined){
   clearInterval(timer1)
 }else{
   clearInterval(timer2)
 }
}

function onRepeat(){
 var elements = document.timer.elements[6];
 if(elements.style.color == "red"){
   elements.style.color = "#000"
   repeat_flag = false;
 }else{
   elements.style.color = "red";
   repeat_flag = true;
 }
}

function countDown(){
 tmWrite(remaining_time);
}

function tmWrite(int){
 switch(type){
   case'do':
   document.getElementById("time-border").style.borderColor="#FF8000";
   break;
   case'break':
   document.getElementById("time-border").style.borderColor="#00BFFF";
   break;
 }
 int=parseInt(int);
 if (int<0){
   if(repeat_flag==true){
     if(break_flag){
       play();
       break_time()
     }else{
       play();
       repeatStart()
     }
   }else{
     if(break_flag){
       play();
       break_time()
     }else{
       reSet();
       play();
       alert("時間です！");
     }
   }
 }else{
   var time_min = Math.floor(int/60);
   if(time_min<10){
     a = '0'+time_min;
   }else{
     a = time_min
   }
   var time_sec = int % 60;
   if(time_sec<10){
     b = '0'+time_sec;
   }else{
     b = time_sec;
   }
   document.getElementById('time').textContent = a + ":" + b;
   remaining_time=remaining_time-1;
 }
}

function reSet(){
 type='init'
 var timer = document.timer;
 document.getElementById("time-border").style.borderColor="#000"
 document.getElementById('time').textContent = "00:00";
 timer.elements[0].value="0";
 timer.elements[0].style.borderColor="#000"
 timer.elements[1].value="0";
 timer.elements[1].style.borderColor="#000"
 timer.elements[2].value="0";
 timer.elements[2].style.borderColor="#000"
 timer.elements[3].value="0";
 timer.elements[3].style.borderColor="#000"
 timer.elements[4].disabled=false;
 timer.elements[5].disabled=true;
 clearInterval(timer1);
 clearInterval(timer2);
}

function break_time(){
 remaining_time = breakmin*60+breaksec;
 type='break';
 break_flag = false;
 clearInterval(timer1);
 timer2=setInterval("countDown()",1000);
}

function repeatStart(){
 type='do';
 if(breakmin+breaksec>0){
   break_flag = true;
 }
 remaining_time = min*60+sec;
 clearInterval(timer1);
 clearInterval(timer2);
 timer1=setInterval("countDown()",1000);
}

function onReset(){
 clearInterval(timer1);
 clearInterval(timer2);
 document.timer.elements[0].value="0";
 document.timer.elements[1].value="0";
 document.timer.elements[2].value="0";
 document.timer.elements[3].value="0";
 document.timer.elements[4].disabled=false;
 document.timer.elements[5].disabled=true;
 document.getElementById('time').textContent = "00:00";
 document.getElementById("time-border").style.borderColor="#000"
 break_flag = false;
 repeat_flag = false;
 stop_flag = false;
 min = "";
 sec = "";
 breakmin = "";
 breaksec = "";
 remaining_time = "";
 type='init'
 var elements = document.timer.elements[6];
 if(elements.style.color == "red"){
   elements.style.color = "#000"
   repeat_flag = false;
 }
}

var music = new Audio();
function init() {
 music.preload = "auto";
 music.src = "./sms-alert-3-daniel_simon.mp3";
 music.load();
}

function play() {
 music.play();
}

コードの改善点

・同じ記述などはファンクションにして記述量を減らしたい。

・関心の分離やDRY原則、SOLID原則などを意識するといいコードが書けそう。

・タイマーをsetIntervalで１秒ずつ呼び出しているが、これでは経過時間が狂ってします為現在時刻から経過時間を出すようにする。

まとめ

今回カスタムドメインを取得して作ったものを公開するのは初めてなので、様々な経験ができたと思います。

しかし改善点が自分で上げれるモノだけでもたくさんあるので、これから直して更新していきたい。

参考

こちらのカウントダウンタイマーをベースにこのインターバルタイマーを作ってみました。

カウントダウンタイマー－JavaScript入門

カスタムドメイン取得から設定まで参考にさせていただきました。

Netlifyにお名前.comで取得した独自ドメインを設定する - Qiita

jsでアラーム音を出すとき参考にさせていただきました。

JavaScriptのAudioオブジェクトの使い方を現役エンジニアが解説【初心者向け】