CODEWITHSUNDEEP
javascript
Mike Pala
Mike Pala

Reputation: 806

how to reset Javascript minute countdown timer

I found this vanilla JS count down timer that really suits my needs. http://jsfiddle.net/wr1ua0db/17/ 

`<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>


function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
}

window.onload = function () {
var fiveMinutes = 60 * 5,
    display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};

I am looking for a reset function that I could assign to buttons or events. I mean a function that would NOT stop the timer... just reset it back to 5:00 ... so it would automatically go to 4:59... 4:58 ... etc

Upvotes: 1

Views: 8118

Answers (3)

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

If you move timer variable to parent scope you'll have access to it from other functions. Then you can reset it in a function called resetTimer. See below:

var timer;
function startTimer(duration, display) {
    timer = duration;
    var minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

function resetTimer() {
  timer = 60 * 5;
}

window.onload = function () {
    fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

Here is a fiddle

Upvotes: 8

Jaitsujin
Jaitsujin

Reputation: 141

Try this one. It starts a timer on load and gives you the ability to reset to the initial state.

<style>
#reset:hover {
    cursor: pointer;
}
</style>

<div>Time left = <span id="timer">05:00</span><span id="reset" title="Reset Timer"> &#8634;</span></div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

    var upgradeTime = 300; // seconds
    var seconds = upgradeTime;

    function timer() {
        var days = Math.floor(seconds / 24 / 60 / 60);
        var hoursLeft = Math.floor((seconds) - (days * 86400));
        var hours = Math.floor(hoursLeft / 3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
        var minutes = Math.floor(minutesLeft / 60);
        var remainingSeconds = seconds % 60;

        function pad(n) {
            return (n < 10 ? "0" + n : n);
        }
        document.getElementById('timer').innerHTML = pad(minutes) + ":" + pad(remainingSeconds);
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('timer').innerHTML = "Completed";
            document.getElementById('reset').style.visibility = 'hidden';

        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer()', 1000);

    // function resetTimer() {
    //     seconds = upgradeTime;
    // }
    $("#reset").click(function() {
        seconds = upgradeTime;
    });

</script>

Upvotes: 4

Frontend employee
Frontend employee

Reputation: 729

Use something like addEventListener and call the named function. 

(function() {
  'use strict';
   let reset = document.getElementById('reset');
  
   reset.addEventListener('click', function() {
      alert('reset');
   //add here the function name to call them. 
   })
})();
<button id="reset">Reset</buton>

Upvotes: 0

Related Questions