Question

我试图进行倒计时，以10为单位从200倒数到0。

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

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

所以简而言之：倒计时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

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

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

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

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

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

JSFiddle

＆＃13;

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

＆＃13;

body {
  font: 100% "Helvetica Neue", sans-serif;
  text-align: center;
}
.hide{
  display: none;
}

#log,
#price {
  font-size: 500%;
  font-weight: bold;
}

＆＃13;

<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>

＆＃13;

希望它有所帮助！

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

2 个答案: