HTML Compteur qui commence à 15 minutes et va jusqu'à ce que le bouton presse?

Question

J'essaye de faire une petite page de HTML avec 2 boutons dessus et 1 baisse vers le bas (finalement je multiplierai ceci par 5).

Le premier bouton active une petite minuterie qui démarre à 15 minutes et pénètre dans les négatifs jusqu'à ce que vous appuyiez de nouveau sur le bouton.

Le deuxième bouton fait exactement la même chose, mais commence à 30 minutes et descend dans les négatifs jusqu'à ce que le bouton soit enfoncé à nouveau.

Le menu déroulant contient uniquement une liste de tous les employés.

J'ai trouvé beaucoup de minuteurs différents, mais aucun d'eux ne va dans les négatifs. et si je supprime l'instruction if qui vérifie les négatifs, cela ne fonctionne tout simplement pas. Quelqu'un peut-il m'aider avec ce compteur négatif?

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

Vous pouvez essayer cette

(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

Voilà comment je le ferais:

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

S'il vous plaît noter que je mis en œuvre que la minuterie de 15 minutes. Vous pouvez reproduire le code pour les 30 minutes.