Chronometer script with Javascript in my Django application

Question

I'm looking for implement a Chronometer script in with JS in my Django web application. This chronometer has multiple functions :

• User can start the chronometer (0:0s --> 1:2s)
• User can stop the chronometer and start again (stop at 3:3s than if user click one more time on start --> 3:4, 3:5 ....)
• User can reset the chronometer

I'm a beginner with Javascript and I would get your help in order to improve my script :

// Here set the minutes, seconds, and tenths-of-second when you want the chronometer to stop
// If all these values are set to 0, the chronometer not stop automatically
var stmints = 0;
var stseconds = 0;
var stzecsec = 0;

// function to be executed when the chronometer stops
// function toAutoStop() {
//  alert('You stopped the chronometer');
// }

// the initial tenths-of-second, seconds, and minutes
var zecsec = 0;
var seconds = 0;
var mints = 0;

var startchron = 0;

function chronometer() {
  if (startchron == 1) {
    zecsec += 1; // set tenths of a second

    // set seconds
    if (zecsec > 9) {
      zecsec = 0;
      seconds += 1;
    }

    // set minutes
    if (seconds > 59) {
      seconds = 0;
      mints += 1;
    }

    // adds data in #showtm
    document.getElementById('showtm').innerHTML = mints + ' : ' + seconds + '<sub>' + zecsec + '</sub>';

    // if the chronometer reaches to the values for stop, calls whenChrStop(), else, auto-calls chronometer()
    if (zecsec == stzecsec && seconds == stseconds && mints == stmints) toAutoStop();
    else setTimeout("chronometer()", 100);
  }
}

function startChr() {
  startchron = 1;
  chronometer();
} // starts the chronometer
function stopChr() {
  startchron = 0;
} // stops the chronometer
function resetChr() {
  zecsec = 0;
  seconds = 0;
  mints = 0;
  startchron = 0;
  document.getElementById('showtm').innerHTML = mints + ' : ' + seconds + '<sub>' + zecsec + '</sub>';
}
// start the chronometer, delete this line if you want to not automatically start the stopwatch
// startChr();

<div id="showtm" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="startChr()">Start the chronometer </button>
<button onclick="stopChr()">Stop the chronometer</button>
<button onclick="resetChr()">Reset the chronometer</button>

But I'm getting some issues with my script :

1. The chronometer starts when the page is loaded. When I overcome to the HTML page or when I actualize my page, the chronometer starts. I would like to begin the chronometer only when users click on "start" (solved in my comment)

2. I would like to pick-up the variable when I stop the chronometer in order to fill a Django form. How I can get this chronometer variable in my script ?

3. When I start the chronometer it works fine, but If I'm watching another tab in my browser and I come back on the chronometer, time displayed is false because I launched on the same time my smartphone chronometer. The JS chronometer is delayed ..

Up to now, I'm getting these both issues :/

Thank you

EDIT :

My new code :

<div class="form" id="showtm" style="font-size:21px; font-weight:800;">0 minutes : 0 secondes : 0 millisecondes</div>
            <script type="text/javascript">

                // Here set the minutes, seconds, and tenths-of-second when you want the chronometer to stop
                // If all these values are set to 0, the chronometer not stop automatically
                var stmints = 0;
                var stseconds = 0;
                var stzecsec = 0;

                // function to be executed when the chronometer stops
                //function toAutoStop() {
                //alert('Vous avez stoppé le chronomètre');
                //}

                // the initial tenths-of-second, seconds, and minutes
                var zecsec = 0;
                var seconds = 0;
                var mints = 0;

                var startchron = 0;

                function chronometer() {
                if(startchron == 1) {
                    seconds += 1;       // set tenths of a second

                    // set seconds
                    //if(zecsec > 9) {
                    //zecsec = 0;
                    //seconds += 1;
                    //}

                    // set minutes
                    if(seconds > 59) {
                    seconds = 0;
                    mints += 1;
                    }

                    // adds data in #showtm
                    document.getElementById('showtm').innerHTML = mints+ ' min '+ seconds + ' sec ' + zecsec   ;

                    // if the chronometer reaches to the values for stop, calls whenChrStop(), else, auto-calls chronometer()
                    if(zecsec == stzecsec && seconds == stseconds && mints == stmints) toAutoStop();
                    else setTimeout("chronometer()", 1000);
                }
                }

                function startChr() { startchron = 1; chronometer(); }      // starts the chronometer
                function stopChr() { startchron = 0; }                      // stops the chronometer
                function resetChr() {
                zecsec = 0;  seconds = 0; mints = 0; startchron = 0; 
                document.getElementById('showtm').innerHTML = mints+ ' min '+ seconds+ ' sec ' + zecsec ;
                }
                // start the chronometer, delete this line if you want to not automatically start the stopwatch
                //startChr();

                document.getElementById('showtm').value=seconds;
            </script>
            <p></p>

            <div class="form">
            <button onclick="startChr()">Démarrer l'intervention </button>
            <button onclick="stopChr()">Stopper l'intervention</button>
            <button onclick="resetChr()">Reset de l'intervention</button>
            </div>

Answer 1

1. starting on load

you already solved, as it was commented in code to just delete startChr() at the end of the script.

// start the chronometer, delete this line if you want to not automatically start the stopwatch
startChr();

at the end of the script.

2. Picking values

You need to put handler function filling your form, called in stopChr. You use variables mints for minutes, seconds and zecsec for 1/00 seconds

function stopChr() {
    startchron = 0;
    // HERE YOU PUT YOUR HANDLER FUNCTION TO FILL YOUR FORM
    // mints:seconds, zecsec
}

3. chrono stoping

That is by design, tl;dr;

When a tab is inactive, only at a maximum of once per second the function is called.

As you are incrementing your chronometer by hundreths, not seconds (100ms instead of 1000ms), your chronometer is automaticly suspended. More on that topic you can read here How can I make setInterval also work when a tab is inactive in Chrome?

Working snipet for not suspending counter

/**
 *  SCRIPT
 */
// Here set the minutes, seconds, and tenths-of-second when you want the chronometer to stop
// If all these values are set to 0, the chronometer not stop automatically
var stmints = 0;
var stseconds = 0;
// selectors to elements, where we are displaying timer. They also are form fields, so they are going to be send to server
var mints_elm = document.getElementById('minutes')
var seconds_elm = document.getElementById('seconds')

// the initial tenths-of-second, seconds, and minutes
var seconds = 0;
var mints = 0;

var startchron = 0;

function chronometer() {
  if (startchron == 1) {
    seconds += 1; // set tenths of a second

    // set minutes
    if (seconds > 59) {
      seconds = 0;
      mints += 1;
    }

    // adds data in proper fields
    mints_elm.value = mints
    seconds_elm.value = seconds

    // if the chronometer reaches to the values for stop, calls whenChrStop(), else, auto-calls chronometer()
    if (seconds == stseconds && mints == stmints) {
      toAutoStop();
    } else {
      setTimeout("chronometer()", 1000);
     }
  }
}

function startChr() {
  startchron = 1;
  chronometer();
} // starts the chronometer
function stopChr() {
  startchron = 0;
} // stops the chronometer
function resetChr() {
  seconds = 0;
  mints = 0;
  startchron = 0;
  mints_elm.value = mints
  seconds_elm.value = seconds
}

/* css, just for better displaying */
input[type="text"] {
  font-size:21px; 
  font-weight:800;
  width: 50px;
  text-align: center;
  border: none;
  background: transparent;
}

<!-- HTML -->
<form id="form" action="#urltobackendservice">
  <input name="minutes" id="minutes" value="0" type="text" /> : 
  <input name="seconds" id="seconds" value="0" type="text" />
  <input type="submit" value="Send result" />
</form>
<hr />
<button onclick="startChr()">Start the chronometer </button>
<button onclick="stopChr()">Stop the chronometer</button>
<button onclick="resetChr()">Reset the chronometer</button>