如何將計數器值顯示到輸出中以開始倒計時

Question

我正在建立一個櫃台，並有一些問題。 我有一個計數器字段，其中增量和減量發生（默認情況下，它是5分鍾）。 按下“開始”按鈕時，最終計數器的數字應設置為輸出字段中的計時器。 這是我的解決方案：

;(function(){
  var output = document.querySelector('#output'),
    btn = document.querySelector('button'),
    min = 5,
    sec = min * 60,
    timer;

setCount(min);

  function setCount(n){
    var c = document.querySelector('#counter'),
        increment = c.children[1].children[0],
        decrement = c.children[1].children[2],
        num  = c.children[1].children[1];      

    increment.onclick = function(){
      if(n >= 1) {num.textContent = ++n;}
    };  

    decrement.onclick = function(){
      if(n > 1) {num.textContent = --n;}
    };  
    num.textContent = n;
   }

  function setTimer(){

    var currentMin = Math.round((sec - 30) / 60),
        currentSec = sec % 60;

    if(currentMin >= 0 ) {currentMin = '0' + currentMin;}
    if(currentSec <= 9 ) {currentSec = '0' + currentSec;}  
    if(sec !== 0){sec--;}
    timer = setTimeout(setTimer,10);  // 10 is for the speedy
    output.textContent = currentMin + ':' + currentSec;  
  }

  btn.addEventListener('click', setTimer, false);
  })();

這是鏈接： JS Bin

Answer 1

TL; DR

if(n >= 1) {num.textContent = ++n; sec = n * 60;} // Line 15
...
if(n > 1) {num.textContent = --n; sec = n * 60; } // Line 19

您的計時器從秒中獲取它的起始最小值，該值始終等於5 * 60 。 每次單擊+或-時，您需要更新秒數。

 (function() { var output = document.querySelector('#output'); var btn = document.querySelector('button'); var min = 5; var sec = min * 60; var timer; var counter = document.querySelector('#counter ul'); var increment = counter.children[0]; var decrement = counter.children[2]; var number = counter.children[1]; number.textContent = min; increment.onclick = function() { min++; number.textContent = min; sec = min * 60; }; decrement.onclick = function() { min--; if (min < 1) { min = 1; } sec = min * 60; number.textContent = min; }; function setTimer() { var currentMin = Math.round((sec - 30) / 60), currentSec = sec % 60; if (currentMin == 0 && currentSec == 0) { output.textContent = '00:00'; return; } else { timer = setTimeout(setTimer, 10); } if (currentMin <= 9) { currentMin = '0' + currentMin; } if (currentSec <= 0) { currentSec = '0' + currentSec; } if (sec !== 0) { sec--; } output.textContent = currentMin + ':' + currentSec; console.log('currentMin: ' + currentMin); } btn.addEventListener('click', setTimer, false); })();

 #wrapper { width: 300px; border: 1px solid #f00; text-align: center; } #output { height: 40px; line-height: 40px; border-bottom: 1px solid #f00; } h4 { margin: 10px 0; } ul { margin: 0; padding: 0; } li { list-style: none; width: 40px; height: 40px; line-height: 40px; display: inline-block; border: 1px solid #f00; } li:nth-child(odd) { cursor: pointer; } button { padding: 5px 15px; margin: 10px 0; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="wrapper"> <div id="output"></div> <div id="counter"> <h4>counter</h4> <ul> <li>+</li> <li></li> <li>-</li> </ul> </div> <button id="start">start</button> </div> </body> </html>

如何將計數器值顯示到輸出中以開始倒計時

問題描述

1 個解決方案

解決方案1
1 2016-01-29 04:53:37

如何將計數器值顯示到輸出中以開始倒計時

問題描述

1 個解決方案

解決方案1 1 2016-01-29 04:53:37

解決方案1
1 2016-01-29 04:53:37