HTMLボタンが押されるまで15分から開始するカウンター？

Question

私はそれに2つのボタンと1ドロップダウン（最終的に私は5でこれを掛ける）と少しHTMLページを作ろうとしています。

最初のボタンは、15分後に開始される小さなタイマーをアクティブにし、ボタンが再び押されるまでネガティブに入ります。

2番目のボタンはまったく同じことを行いますが、30分後に開始され、もう一度ボタンが押されるまでネガティブになります。

ドロップダウンリストには、全従業員のリストがあります。

私は多くの異なるタイマーを見つけましたが、どれもネガティブには入りません。ネガをチェックするif文を削除しても機能しません。誰もこのネガティブなカウンターで私を助けることができますか？

$(document).ready(function() { 
    var secs = 0; 
    var id = setInterval(function() { 
     secs++; console.log(secs); 
     if (secs > 5) { 
      clearInterval(id); 
      alert('Total Time: ' + secs + ' seconds'); 
     } 
    }, 1000); 
}); 

######Javascript: 

window.onload = function() { 
    var secs = 0; 
    var id = setInterval(function() { 
     secs++; console.log(secs); 
     if (secs > 5) { 
      clearInterval(id); 
      alert('Total Time: ' + secs + ' seconds'); 
     } 
    }, 1000); 
}; 

Answer 1

あなたは試みることができるこの

(function (javascript) { 
 
    // An Array with the doms and their cancellation functions 
 
    var buttonList = []; 
 

 
    /** 
 
    * Toggles each button's timer 
 
    * @param {HTMLElement} dom 
 
    * @param {number} timer 
 
    * @returns {void} 
 
    */ 
 
    function toggleButton(dom, timer) { 
 
     // find the object for the dom in the list 
 
     var result = buttonList.find(function (item) { 
 
      return item.dom === dom; 
 
     }); 
 
     // if it is found 
 
     if (result) { 
 
      // stop the timer 
 
      result.cancel(); 
 
      // reset the text to default 
 
      print(timerFormat(timer)); 
 
      // remove the object from the list 
 
      var index = buttonList.indexOf(result); 
 
      buttonList.splice(index, 1); 
 
     } else { 
 
      // if it isn't found then start the timer and add the object to the list 
 
      buttonList.push({ 
 
       cancel: startTimer(timer, print), 
 
       dom: dom 
 
      }); 
 
     } 
 
     /** 
 
     * Changes the text of the element 
 
     * @param {string} text 
 
     * @returns {void} 
 
     */ 
 
     function print(text) { 
 
      dom.innerText = text; 
 
     } 
 
    } 
 

 
    /** 
 
    * Creates a timer and returns a cancelation function 
 
    * @param {number} timer 
 
    * @param {function(string): void} print 
 
    * @returns {function(): void} 
 
    */ 
 
    function startTimer(timer, print) { 
 
     var intervalId = setInterval(onTick, 1000); 
 
     return cancel; 
 
     function onTick() { 
 
      var result = timerFormat(timer--); 
 
      if (typeof print === "function") print(result); 
 
      else console.log(result); 
 
     } 
 
     function cancel() { 
 
      if (intervalId) { 
 
       clearInterval(intervalId); 
 
       intervalId = undefined; 
 
      } 
 
     } 
 
    } 
 

 
    /** 
 
    * Converts the seconds into [mm:ss] format 
 
    * @param {number} timer 
 
    * @returns {string} 
 
    */ 
 
    function timerFormat(timer) { 
 
     var negative = false; 
 
     if (timer < 0) { 
 
      timer = timer * -1; 
 
      negative = true; 
 
     } 
 
     var minutes = Math.floor(timer/60); 
 
     var seconds = String(timer % 60); 
 
     var symbol = negative ? "- " : ""; 
 
     return symbol + minutes + ":" + "0".repeat(2 - seconds.length) + seconds; 
 
    } 
 

 
    javascript.toggleButton = toggleButton; 
 
})(window);

<button onclick="toggleButton(this, 900)">15:00</button> 
 
<button onclick="toggleButton(this, 1800)">30:00</button>

Answer 2

これは、私はそれを行うだろうかです：

var myTimer; 
var started = false 
var count = 15 * 60; //15 mins x 60 secs 

$("button").click(function() { 
    if (!started) { 
    started = true; 
    $(this).text("Stop"); 
    myTimer = setInterval(function() { 
     $(".timer").text(--count); 
    }, 1000); 
    } else { 
    started = false; 
    clearInterval(myTimer); 
    $(this).text("Start"); 
    } 
}); 

Here is the JSFiddle demo

私はわずか15分のタイマーを実装していることに注意してください。あなたは30分1のコードを複製することができます。