Counter refresh.

[MuphN]

Hello. So I have a problem. I have a counter that counts down to 0. And you can set the numbers to count to urself, but I need to make it that it wouldn't refresh when you refresh the whole page. I guess I should use SESSION or something, but I cant make it work for some reason.

    /* 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;
    document.getElementById('btnct').setAttribute('disabled', 'disabled');     // disable the button
  }

  // 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);
}
//-->

<form>
Minutes: <input type="text" id="mns" name="mns" value="0" size="3" maxlength="3" />     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:   <span id="showmns">00</span>:<span id="showscs">00</span>

Hare java and html.

[denno020]

This would usually be done with a database that would store values like; when the timer was started, if the timer is paused, (and if paused) when the timer was paused.

 

Without the use of a database, I guess you could use a cookie or localstorage to store those same values. When your page loads, look for that information and have the timer set itself accordingly..

 

Hope that gets you on the right track

Denno

[jburridge]

    function setCookie(c_name,value,exdays)

    {

      var exdate=new Date();

      exdate.setDate(exdate.getDate() + exdays);

      var c_value=escape(value) + 

        ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));

      document.cookie=c_name + "=" + c_value;

    }


    function getCookie(c_name)

    {

     var i,x,y,ARRcookies=document.cookie.split(";");

     for (i=0;i<ARRcookies.length;i++)

     {

      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));

      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);

      x=x.replace(/^\s+|\s+$/g,"");

      if (x==c_name)

      {

       return unescape(y);

      }

     }

    }