在我的Django应用程序中带有Javascript的Chronometer脚本

Question

我正在我的Django web应用程序中用JS实现一个Chronometer脚本。这个计时器有多种功能：

• 用户可以启动计时器(0:0-> 1:2s)
• 用户可以停止计时器并重新启动(在3:3s时停止，如果用户在开始时再单击一次-> 3:4，3:5 .)
• 用户可以重置计时器。

我是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('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>

​

但我的剧本有些问题：

1. 当加载页面时，计时器将启动。当我克服HTML页面或者实现我的页面时，计时器就会启动。只有当用户点击“开始”(在我的评论中解决)时，我才会开始使用计时器。
2. 当我停止计时器以填充Django形式时，我想取这个变量。如何在我的脚本中得到这个计时器变量？
3. 当我启动计时器时，它可以正常工作，但如果我在浏览器中看到另一个选项卡，然后回到计时器上，所显示的时间是错误的，因为我在同一时间启动了我的智能手机计时器。JS计时器延迟了。

到目前为止，我正在处理这两个问题:/

谢谢

编辑：

我的新代码：

<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；

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

当你把你的计时器增加百分之一，而不是秒(100毫秒而不是1000毫秒)时，你的计时器就会自动挂起。有关这个主题的更多信息，您可以在这里阅读How can I make setInterval also work when a tab is inactive in Chrome?。

不挂计数器的工作段

​

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

​