2016-07-29 12 views
1

私はjavascriptを把握しようとしています...現在、私はカウントダウンタイマーを使用しています。左または右のキーを押したときに1分を加算または減算したいと思います。JavaScriptのカウントダウンから時間を加算/減算する

私は次のことを試してみました:任意の助けをいただければ幸いです

...

$(document).keydown(function(e) { 
    switch(e.which) { 
     case 37: // left 
      current = parseInt($('#time2').textContent); 
      newtime = current + 60; 
      countdown_start(newtime) 
     break; 

     case 39: // right 
      alert('right'); 
     break; 

     default: return; 
    } 
    e.preventDefault(); // prevent the default action (scroll/move caret) 
    }); 

をしかし、それはいくつかの本当にファンキーな反応を持っている...そして...二回NaNaNaNaと一つにカウントダウンを開始。ありがとう!

.background-countdown 
    #start-game 
    = submit_tag 'Play', id: "start" 
    #time2 
    60:00 
    .test 
    asd 
    -##start-time 
    -# =text_field_tag 'start-time-input', "60:00", id: "start-time-input" 

    #hint-text.white-text 

:javascript 

    function startTimer(duration, display) { 
    var timer = duration, minutes, seconds; 
    var countdown = setInterval(function() { 
     minutes = parseInt(timer/60, 10) 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.textContent = minutes + ":" + seconds; 

     if (--timer < 0) { 
      $('#start').show() 
      $('#start-time').show() 
      clearInterval(countdown) 
     } 
    }, 1000); 
    } 
    function countdown_start(sixtyMinutes = 3600) { 
    $(document).ready(function() { 
     display = document.querySelector('#time2'); 
     startTimer(sixtyMinutes, display); 
    }); 
    } 

    $('#start').click(function() { 
    countdown_start() 
    $('#start').hide() 
    event.preventDefault(); 
    }); 

    function get_text(){ 
    var feedback = $.ajax({ 
     type: "POST", 
     url: "/jquery/update_text", 
     async: false 
    }).complete(function(){ 
     setTimeout(function(){get_text();}, 1000); 
    }).responseText; 
    } 

    $(function(){ 
    get_text(); 
    }); 
+0

時間を追加すると間隔がクリアされず、毎回新しい間隔が作成されます。あなたの右のキーは何もしません... get_text関数が何であるか分かりません –

+0

get_textは他のものです...それを含めることを意味しませんでした。インターバルをクリアするにはどうすればいいですか? –

+0

どのプリプロセッサをHTMLに使用しますか? –

答えて

0

ここでの問題は、あなたが右てclearIntervalを使用していること、であるかもしれないが、あなたは正しくsetIntervallメソッドの戻りID値を保存していません。

w3schools.comページを見てください: http://www.w3schools.com/jsref/met_win_clearinterval.asp

彼らは定義の下にノートに書く:

注:はてclearInterval()メソッドを使用できるようにするにはインターバルメソッドを作成するときにグローバル変数を使用する必要があります

IDをローカルに保存するので、そうしないでください。 代わりにグローバル変数を使用してください。これは関数セクションの外に宣言し、その参照を何度も繰り返し使用することを意味しますが、変更したいものは注文だけです。最初に間隔を設定し、後でstartMethod関数で同じ間隔をクリアします。私はあなたが順序を変えて変数をグローバルにすると、うまくいくはずだと思います。

+0

ありがとう、これは良い考えのように聞こえる。 –

関連する問題