重置空格键上的计数器并单击

Reset counter on spacebar and onclick

本文关键字：计数器 单击 空格键      更新时间：2023-09-26

我正在尝试以 10 为步长从 200 倒

计时到 0。

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

在示例中，它到达 0 并不需要很长时间，但最终，达到 0 需要 15-20 秒，这将等待太长。

简而言之：倒计时 200-0，但单击Start按钮或空格键，它应该停止当前正在运行的功能，以便可以再次启动。

查看此笔

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

.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';
    }
}

我"重新编码"您的代码，因为那里有几个问题。

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

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>

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

此外，我冒昧地重新格式化了您的代码，并且出于演示目的，将延迟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>

希望对您有所帮助！

相关文章：