重置空格键和 onclick 上的计数器

Question

我正在尝试进行倒计时，以 10 为步长从 200 倒数到 0。

这个计时器可以停止，然后应该重置为 200，但是，我还需要停止的那一刻的值。倒计时用 innerHTML 填充 div #log。每当我 "stop" 计时器时，我都会获取 #log 的值并将其放入 #price 并隐藏 #log。这里的问题是计时器在后台继续，而我希望它重置以便可以通过单击开始再次启动它。但是，它只是继续倒计时，只有在完成后，我才能重新开始。

在这个例子中，它到达0的时间并不长，但最后，到达0需要15-20秒，等待的时间太长了。

所以简而言之： 倒计时 200-0，但是单击 Start-按钮或空格键时，它应该停止功能运行片刻，所以它可以重新开始。

See this PEN

如果您对如何完全不同地处理它有任何建议，非常欢迎您分享！

HTML

<button id="btn" class="normal">Start</button>
<div id="log">#</div>
<div id="price"></div>

JS

var log = document.getElementById("log");
var btn = document.getElementById("btn");
var price = document.getElementById("price");
var counting = false;
var btnClassName = btn.getAttribute("class");

function start(count) {
  if (!counting) {
    counting = true;
    log.innerHTML = count;
    var timer = setInterval(function() {
      if (count >= 0) {
        log.innerHTML = count;
        count -= 10;
      }  else {
        clearInterval(timer);
        count = arguments[0];
        counting = false;
        btn.className = "normal";
      }
    }, 150);
  };
};

btn.onclick = function() {
  if (btnClassName == "normal") {
    start(200);
    price.style.display = 'none';
    log.style.display = 'block';
    btn.className = "counting";
    log.innerHTML = "";
  } else {
  }
};

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
      price.innerHTML = log.innerHTML;
      price.style.display = 'block';
      log.style.display = 'none';
    }
}

Answer 1

我 "re-code" 你的代码，因为那里有几个问题。

只需阅读代码并告诉我这是否是您正在寻找的或者您是否有任何问题..

var log = document.getElementById("log");
var btn = document.getElementById("btn");
var price = document.getElementById("price");
var counting = false;
var timer;
var c = 0;

function start(count) {
  btn.blur();
  if (!counting) {
    c = count;
    counting = true;
    log.innerHTML = count;
    timer = setInterval(tick, 1500);
    tick();
  };
};

function tick() {
  if (c >= 0) {
    log.innerHTML = c;
    c -= 10;
  } 
  else {
    clearInterval(timer);
    c = arguments[0];
    counting = false;
    btn.className = "normal";
  }
}

btn.onclick = function() {
  resetTimer();
  var btnClassName = btn.getAttribute("class");
  if (btnClassName == "normal") {
    price.style.display = 'none';
    log.style.display = 'block';
    btn.className = "counting";
    log.innerHTML = "";
    start(200);
  } else {
    pause();
  }
};

document.body.onkeyup = function(e) {
  if(e.keyCode == 32) {
    e.preventDefault();
    pause();
  }
}

function pause() {
  resetTimer();
  price.innerHTML = log.innerHTML;
  price.style.display = 'block';
  log.style.display = 'none';
  btn.className = 'normal';
  counting = false;
}

function resetTimer() {
  clearInterval(timer);
}

body { font: 100% "Helvetica Neue", sans-serif; text-align: center; }

/*#outer {
width: 400px;
height: 400px;
border-radius: 100%;
background: #ced899;
margin: auto;
}

#inner {
width: 350px;
height: 350px;
border-radius: 100%;
background: #398dba;
margin: auto;
}*/

#log, #price { 
  font-size: 500%; 
  font-weight: bold; 
}

<div id="outer">
  <div id="inner">
    <div id="arrow">
    </div>
  </div>
</div>
<button id="btn" class="normal">Start</button>
<div id="log">#</div>
<div id="price"></div>

Answer 2

虽然你已经得到了答案，但你可以尝试这样的事情：

另外，我已经冒昧地重新格式化了您的代码，并且出于演示目的，将 delay for interval 保留为 1000

JSFiddle

function Counter(obj) {
  var _initialVaue = obj.initialValue || 0;
  var _interval = null;
  var status = "Stopped";
  var start = function() {
    this.status = "Started";
    if (!_interval) {
      _interval = setInterval(obj.callback, obj.delay);
    }
  }
  var reset = function() {
    stop();
    start();
  }
  var stop = function() {
    if (_interval) {
      this.status = "Stopped";
      window.clearInterval(_interval);
      _interval = null;
    }
  }

  return {
    start: start,
    reset: reset,
    stop: stop,
    status: status
  }
}

function init() {
  var counterOption = {}
  var count = 200;
  counterOption.callback = function() {
    if (count >= 0) {
      printLog(count);
      count -= 10;
    } else {
      counter.stop();
    }
  };
  counterOption.delay = 1000;
  counterOption.initialValue = 200

  var counter = new Counter(counterOption);

  function registerEvents() {
    document.getElementById("btn").onclick = function() {
      if (counter.status === "Stopped") {
        count = counterOption.initialValue;
        counter.start();
        printLog("")
        toggleDivs(counter.status)
      }
    };

    document.onkeyup = function(e) {
      if (e.keyCode === 32) {
        printLog(counterOption.initialValue);
        counter.stop();
        toggleDivs(counter.status)
        printPrice(count);
      }
    }
  }

  function printLog(str) {
    document.getElementById("log").innerHTML = str;
  }

  function printPrice(str) {
    document.getElementById("price").innerHTML = str;
  }

  function toggleDivs(status) {
    document.getElementById("log").className = "";
    document.getElementById("price").className = "";
    var hideID = (status === "Started") ? "price" : "log";
    document.getElementById(hideID).className = "hide";
  }
  
  registerEvents();
}
init();

body {
  font: 100% "Helvetica Neue", sans-serif;
  text-align: center;
}
.hide{
  display: none;
}

#log,
#price {
  font-size: 500%;
  font-weight: bold;
}

<div id="outer">
  <div id="inner">
    <div id="arrow">
    </div>
  </div>
</div>
<button id="btn" class="normal">Start</button>
<div id="log">#</div>
<div id="price"></div>

希望对您有所帮助！

重置空格键和 onclick 上的计数器

Reset counter on spacebar and onclick

javascript

countdown