在javascript中添加/减少倒计时的时间

时间:2016-07-29 23:58:45

标签: javascript jquery

我正在试图找出javascript ...目前,我正在使用倒数计时器。当按下左或右键时,我想加1 /减1分钟。

我尝试了以下内容:

  $(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();
  });

1 个答案:

答案 0 :(得分:0)

这里的问题可能是您正在使用clearInterval,但是您没有正确保存setIntervall方法的返回ID值。

请查看w3schools.com页面: http://www.w3schools.com/jsref/met_win_clearinterval.asp

他们在定义下写了一个注释:

  

注意:为了能够使用clearInterval()方法,在创建区间方法时必须使用全局变量

您在本地保存您的ID,所以也许您不应该这样做。 而是使用全局变量,这意味着您在函数部分之外声明它并反复使用该引用,但您还想要更改的是您的订单。首先,您要设置一个间隔,然后在startMethod函数中清除相同的间隔。我认为如果你改变顺序并使变量成为全局变量,它应该可以工作。