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 :

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)
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 ?
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。从加载开始

你已经解决了，因为它在代码中被注释为只删除脚本末尾的startChr()。

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

在剧本的最后。

2。选择值

您需要将处理函数填充到表单中，在stopChr中调用。您使用变量mints分钟，seconds和zecsec分钟1/00秒

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

3。计时停止

这是设计的，tl; dr;

当选项卡处于非活动状态时，每秒最多只调用一次该函数。

当您按照hundreths而不是秒（100ms而不是1000ms）递增计时器时，您的计时器会自动暂停。有关该主题的更多信息，请参阅此处How can I make setInterval also work when a tab is inactive in Chrome?

使用snipet暂停计数器

/**
 *  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>

Chronometer script with Javascript in my Django application

1 个答案: