倒数计时器自动触发提交按钮

Question

我正在 PHP 上制作在线考试项目。

我希望倒数计时器在超时时自动触发提交按钮？

此外，如果可能，如果计时器达到 1 分钟标记，则在计时器下方显示另一个 div 标记。

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var examTime = 60 * 5,
    display = document.querySelector('#time');
  startTimer(examTime, display);
};

#timediv {
  background-color: #003300;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}

<div id="timediv">Exam ends in <span id="time">05:00</span> minutes!</div>
<form action="samepage.php" method="post">
  <input type="text" />
  <input type="submit" value="Submit Answer Paper" />
</form>

Answer 1

在 setInterval 回调中，检查时间是否到达 0:

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    if (minutes === 0 && seconds === 0) {
      document.querySelector('form').submit()
    }

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}'

您可以用同样的方式显示消息，但要检查分钟是否等于一。

if (minutes === 1 && seconds === 0) {
  // Display an alert or another timer 
}

Answer 2

您可以将此逻辑添加到您的 startTimer 函数中：

// ...
if (--timer < 0) {
    document.getElementById("theForm").submit();
    // ...
}
// ...

您必须将 <form> 上的 id 属性设置为 theForm。

Answer 3

我希望下面的内容很容易理解。关于 " if possible, display another below the timer if the timer reaches 1 minute mark." 的问题有点含糊，所以我将其解释为在考试还剩 1 分钟时对用户来说意味着 "provide a warning or some sort"。

当倒数计时器到达指定时间时调用提交表单的命令 - 方法很简单 Form.submit() 其中 Form 是对表单的引用，以适合的方式派生.

仅供参考 - 计时器最初已修改为 1 分钟多一点，以便无需等待即可看到效果，等待和等待...

此外 - 在此处的代码中，我使用 alert 表示时间已运行结束...最好在屏幕上显示一条消息！

function startTimer(duration, display) {
 var timer = duration;
 var minutes, seconds;
 var warning = 60;
 var ok=false;
 var form=document.forms.exam;
 
 var t=setInterval(function() {
  minutes = parseInt(timer / 60, 10);
  seconds = parseInt(timer % 60, 10);
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = minutes + ":" + seconds;
  
  if( timer <= warning && !ok ){
   alert('Time is running out.... less than 1 minute to go!');
   ok=true;
  }

  if (--timer <= 0) {
   timer = duration;

   if( !isNaN( t ) )clearInterval( t );
   
   // submit the form...
   form.submit();
  }
 }, 1000);
}

window.onload = function() {
 var examTime = 60 * 1.1;
 var display = document.querySelector('#time');
 startTimer(examTime, display);
};

<div id='timediv'>Exam ends in <span id='time'>05:00</span> minutes!</div>
<form name='exam' action='samepage.php' method='post'>
  <input type='text' />
  <input type='submit' value='Submit Answer Paper' />
</form>

倒数计时器自动触发提交按钮

Countdown timer automaticaly trigger the Submit Button

javascript

time

redirect

timer

countdowntimer