【Rails】タイマー機能

はじめに

Railsでタイマー機能を実装したくて、調べてもなかなか欲しい情報が見つからず

友人から「javascriptで実装できるよ！」と教えてもらったら、あるわ♪あるわ♪情報が

無知過ぎる自分の戒め＆【Rails　タイマー】で検索した際、ヒットするよう記事に残します

どんな機能？

時間を指定し、時間になったらアラートがでるという機能になります。

例えば、３秒と入力し、3秒後にアラートがでる。

こんな感じです(Gyazoなのでタイミングによっては見れなくなります)
↓↓↓↓
https://gyazo.com/89773746aac0c2a1640d48e6a536190b

実装

view.html.haml

.timer__input
    %form{name: "timer"}
      %input{type: "text", value: ""}>/
      分
      %input{type: "text", value: ""}>/
      秒
      %br/
      %input{onclick: "cntStart()", type: "button", value: "スタート"}/
      %input{onclick: "cntStop()", type: "button", value: "ストップ"}/

javascript.js

//タイマー処理
var timer1;

//カウントダウン関数を1000ミリ秒ごとに呼び出す関数
function cntStart() {
  document.timer.elements[2].disabled=true;
  timer1 = setInterval("countDown()",1000);
}

// タイマー停止関数
function cntStop() {
  document.timer.elements[2].disabled=false;
  crearInterval(timer1);
}

// カウントダウン関数
function countDown() {
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;

  if((min=="")&&(sec=="")) {
    alert("時間を設定してください！");
    reSet();
  }
  else {
    if(min=="")min=0;
    min=parseInt(min);

    if(sec=="")sec=0;
    sec=parseInt(sec);

    tmWrite(min*60+sec-1);
  }
}

// 残り時間を書き出す関数
function tmWrite(int) {
  int=parseInt(int);

  if(int <= 0) {
    reSet();
    alert("時間です！");
  }
  else {
    //残り分すうはintを60で割って切り捨てる
    document.timer.elements[0].value=Math.floor(int/60);
    //残り秒数はintを60で割った余り
    document.timer.elements[1].value=int % 60;
  }
}

// フォームを初期状態に戻す(リセット)関数
function reSet() {
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].disabled=false;
  clearInterval(timer1);
}

※上記はCSSはございません
（CSSを実装する前に記事にしてしまったためです）
皆様のデザイン力で素敵なビューを作成してください

感想

javascriptは偉大なり
というのが正直な感想です 笑
まだまだ勉強中の身ではありますが、少しずつ知識をつけていきたいですね

参考

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