質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

jvascriptで書いたカウントダウンタイマーをjQueryで書きたい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,948
退会済みユーザー

退会済みユーザー

 前提・実現したいこと

javascriptで書いたものをjQueryで記述したいです。

javascriptで、カウントダウンタイマーを作りました。それをjQueryで書きたいのですが、
startを押しても動作してくれません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウン</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  var interval_id;
  var time = 180;

  function count_start(){
      document.getElementById('start').disabled = true;
       interval_id = setInterval(count_down , 1000);
  }

  function count_down(){
      var display = document.getElementById('display');
      var min = document.getElementById('min'); //分
      var sec = document.getElementById('sec'); //秒
      if (time === 1 ){
          display.innerHTML = 'TIME UP!';
          document.getElementById('display').style.color = "red";
      }else{
          time--;
          var next_min = Math.floor(time / 60);
          var next_sec = Math.floor(time % 60);

          next_min = zero_padding(next_min); 
          next_sec = zero_padding(next_sec);
          min.innerHTML = next_min;
          sec.innerHTML = next_sec;
       }
     };

  function zero_padding(num){
      return ('00' + num).slice(-2);
  };

  function count_stop(){
      clearInterval(interval_id);
      document.getElementById('start').disabled = false;
  };

  function count_reset(){
      count_stop();
      document.getElementById('min').innerHTML = '03';
      document.getElementById('sec').innerHTML = '00';
      document.getElementById('start').disabled = false;
  };

  window.onload = function(){
    var start = document.getElementById('start');
    start.addEventListener('click' , count_start , false);
    var stop = document.getElementById('stop');
    stop.addEventListener('click', count_stop , false);
    var reset = document.getElementById('reset');
    reset.addEventListener('click', count_reset , false);
  };
</script>
 </head>
<body>
  <div id ="timer">
      <div id ="box">
        <p id ="display"><span id="min">03</span>:<span id="sec">00</span></p>
        <div id="button">
        <button id ="start">スタート</button>
        <button id ="stop">ストップ</button>
        <button id ="reset">リセット</button>
        </div>
      </div>
  </div>
</body>
</html>

 該当のソースコード

自分なりに書いてみたのですが、、、動作しないので間違っているんだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウン</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  var interval_id;
  var time = 180;

  function count_start(){
      $('#start').prop('disabled', 'true');
        interval_id = setInterval(count_down , 1000);
  }

   $(function(){
     $('#start').click(function(){
     $('start').prop('disabled', true);
   interval_id = setInterval(count_down, 1000);
   });
 });

  function count_down(){
      var display = $('#display').get(0);
      var min = $('#min').get(0);
      var sec = $('#sec').get(0);
      if (time === 1 ){
          $('#display').text('TIME UP!').css('color', 'red');
      }else{
          time--;
          var next_min = Math.floor(time / 60);
          var next_sec = Math.floor(time % 60);

          next_min = zero_padding(next_min);
          next_sec = zero_padding(next_sec);
          min.innerHTML = next_min;
          sec.innerHTML = next_sec;
       }
     };

  function zero_padding(num){
      return ('00' + num).slice(-2);
  };

   function count_stop(){
       clearInterval(interval_id);
       $('#start').prop('disabled', 'false');
   };

function count_reset(){
      count_stop();
      $('#min').html('03');
      $('#sec').html('00');
      $('#start').prop('disabled', 'false');
  };

  $(function(){
    var start = $('#start').get(0);
    $('#start').on('click', count_start, flase);

    var stop = $('#stop').get(0);
    $('#stop').on('click', count_start, flase);

    var reset = $('#start').get(0);
    $('#reset').on('click', count_start, flase);
  });

</script>
 </head>
<body>
  <div id ="timer">
      <div id ="box">
        <p id ="display"><span id="min">03</span>:<span id="sec">00</span></p>
        <div id="button">
        <button id ="start">スタート</button>
        <button id ="stop">ストップ</button>
        <button id ="reset">リセット</button>
        </div>
      </div>
  </div>
</body>
</html>

どのように書けばいいかアドバイスいただけますでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/26 23:16

    開発ツールのコンソールにエラー出ていませんか?出ているようでしたら質問に追記願います

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/11/26 23:21 編集

    Uncaught ReferenceError: flase is not defined at HTMLDocument.<anonymous>

    (challenge_jQuery.html:76) at j (jquery.js:3099) at Object.fireWith [as resolveWith] (jquery.js:3211)
    at Function.ready (jquery.js:3417)
    at HTMLDocument.I (jquery.js:3433)

    と言ったエラーが出ています。

    キャンセル

  • m.ts10806

    2018/11/27 08:15

    回答に出ている内容で解決しそうですが、ひとまず質問本文に追記してください。

    キャンセル

回答 3

+1

とりあえず1点。

//                                    ↓どうせ書くならfalse。この引数は不要。
$('#start').on('click', count_start, flase);

【.on() | jQuery API Documentation】
http://api.jquery.com/on/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/27 18:27

    タイプミスの指摘ありがとうございます。全然気付きませんでした。

    キャンセル

checkベストアンサー

0

   $(function(){
     $('#start').click(function(){
     $('start').prop('disabled', true);
   interval_id = setInterval(count_down, 1000);
   });
 });


この記述は最後の方の .on('click',...) と同じ意味になるので、
消してしまって問題ありません。

ざっと直してみたものをアップしてみたので比べてみるとよいかもしれません。
(リセットはそのまま

https://codesandbox.io/s/wk2wr02298

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/27 18:31

    ありがとうございます!
    on.('click') の所もよくわかって無かったのですが、コードみて理解できました!

    キャンセル

  • 2018/11/27 23:58

    最初はわからないことが多いと思いますが、
    イベントと関数の紐づけがわかるようになると他の人のコードを読めるようになるので、
    トライアンドエラーがんばってくださいー!

    キャンセル

  • 2018/11/28 14:35

    ありがとうございます!!
    頑張ります〜!!

    キャンセル

0

総じてこんな感じ

<script>
var interval_id;
var default_time = 180;
var time = default_time;
$(function(){
  $('#start').on('click',function(){
    $(this).prop('disabled',true);
    interval_id = setInterval(count_down , 1000);
  });
  $('#stop').on('click',function(){
    clearInterval(interval_id);
    $('#start').prop('disabled',false);
  });
  $('#reset').on('click',function(){
    $('#stop').prop('disabled',false).trigger('click');
    time=default_time;
    $('#display').html($('<span id="min"></span>:<span id="sec"></span>')).css('color','');
    view();
  }).trigger('click');
});
function view(){
  var next_min = Math.floor(time / 60);
  var next_sec = Math.floor(time % 60);
  next_min = zero_padding(next_min); 
  next_sec = zero_padding(next_sec);
  $('#min').html(next_min);
  $('#sec').html(next_sec);
}
function count_down(){
  if (time <= 1 ){
    $('#stop').prop('disabled',true);
    $('#display').html('TIME UP!').css('color','red');
    clearInterval(interval_id);
  }else{
    time--;
  }
  view();
};
function zero_padding(num){
  return ('00' + num).slice(-2);
};
</script>
<div id ="timer">
<div id ="box">
<p id ="display"></p>
<div id="button">
<button id ="start">スタート</button>
<button id ="stop">ストップ</button>
<button id ="reset">リセット</button>
</div>
</div>
</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/27 18:35

    コードの記述ありがとうございます!trigger()は知りませんでした。
    とても勉強になります。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る