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

Question

我正在寻找在我的 Django Web 应用程序中使用 JS 实现 Chronometer 脚本。该计时器具有多种功能:

• 用户可以启动计时器(0:0s --> 1:2s)
• 用户可以停止计时器并重新开始(在 3:3 秒处停止，而不是用户在开始时再单击一次 --> 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 表示分钟、秒 和 zecsec 表示 1/00 秒

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

3.计时停止

这是设计使然，tl;dr;

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

当您将计时器增加百而不是秒(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>