CODEWITHSUNDEEP
javascript
EnergyLynx EnergyLynx
EnergyLynx EnergyLynx

Reputation: 115

Add Minutes or Seconds to the Javascript countdown timer?

I have a javascript countdown timer. what i need to do is to be able to add 1 minute or few seconds to the timer WHILE the countdown timer is running!

for example: if I set the minutes to 1 minute and press the Start button, the countdown timer will start as it should but if I add another minute to timer while it is running i.e. when its on 32 seconds, it will not add the value to the current number and it will carry on counting down the rest of the first 1 minute added and all it does is speeds up the countdown for some reason!

I hope I haven't confused you guys. Here is the code:

<form>
Minutes: <input type="text" id="mns" name="mns" value="0" size="3" maxlength="3" /> &nbsp; &nbsp; Seconds: <input type="text" id="scs" name="scs" value="0" size="2" maxlength="2" /><br/>
<input type="button" id="btnct" value="START" onclick="countdownTimer()"/>
</form>
Countdown Timer: &nbsp; <span id="showmns">00</span>:<span id="showscs">00</span>
<script type="text/javascript"><!--
    /* Function to display a Countdown timer with starting time from a form */
// sets variables for minutes and seconds
var ctmnts = 0;
var ctsecs = 0;
var startchr = 0;       // used to control when to read data from form

function countdownTimer() {
  // http://coursesweb.net/javascript/
  // if $startchr is 0, and form fields exists, gets data for minutes and seconds, and sets $startchr to 1
  if(startchr == 0 && document.getElementById('mns') && document.getElementById('scs')) {
    // makes sure the script uses integer numbers
    ctmnts = parseInt(document.getElementById('mns').value) + 0;
    ctsecs = parseInt(document.getElementById('scs').value) * 1;

    // if data not a number, sets the value to 0
    if(isNaN(ctmnts)) ctmnts = 0;
    if(isNaN(ctsecs)) ctsecs = 0;

    // rewrite data in form fields to be sure that the fields for minutes and seconds contain integer number
    document.getElementById('mns').value = ctmnts;
    document.getElementById('scs').value = ctsecs;
    startchr = 1;
  }

  // if minutes and seconds are 0, sets $startchr to 0, and return false
  if(ctmnts==0 && ctsecs==0) {
    startchr = 0;
    document.getElementById('btnct').removeAttribute('disabled');     // remove "disabled" to enable the button

    /* HERE YOU CAN ADD TO EXECUTE A JavaScript FUNCTION WHEN COUNTDOWN TIMER REACH TO 0 */

    return false;
  }
  else {
    // decrease seconds, and decrease minutes if seconds reach to 0
    ctsecs--;
    if(ctsecs < 0) {
      if(ctmnts > 0) {
        ctsecs = 59;
        ctmnts--;
      }
      else {
        ctsecs = 0;
        ctmnts = 0;
      }
    }
  }

  // display the time in page, and auto-calls this function after 1 seccond
  document.getElementById('showmns').innerHTML = ctmnts;
  document.getElementById('showscs').innerHTML = ctsecs;
  setTimeout('countdownTimer()', 1000);
}
//-->
</script>

any help would be appreciated.

And here is the fiddle

Upvotes: 0

Views: 4723

Answers (1)

Alnitak
Alnitak

Reputation: 339786

Treat the counter number as a single value of total seconds to go, and only worry about minutes and seconds when converting to and/or from the current value (i.e. when taking the initial input, or when displaying the current value).

See http://jsfiddle.net/alnitak/aBWce/ for a worked example that avoids the need to check for each minute ending, or special cases for padding numbers.

Your return false line is a no-op by the way - callback functions' return values are ignored.

Upvotes: 1

Related Questions