Таймер обратного отсчета автоматически запускает кнопку отправки

Question

Я делаю проект онлайн-экзамена на PHP.

Я хочу, чтобы таймер обратного отсчета автоматически запускал кнопку отправки по истечении времени ожидания?

Также, если возможно, отобразите другой тег div под таймером, если таймер достигает отметки в 1 минуту.

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

Надеюсь, следующее будет довольно легко понять. Вопрос немного расплывчатый, когда дело доходит до " if possible, display another below the timer if the timer reaches 1 minute mark.", поэтому я интерпретировал это как означающее «предоставить предупреждение или какое-то другое» пользователю, когда на экзамене осталась 1 минута.

Команда для отправки форма вызывается, когда таймер обратного отсчета достигает назначенного времени - метод просто Form.submit(), где Form - ссылка на форму, полученная любым подходящим способом.

FYI - таймер был изначально изменено на чуть более 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>

Answer 2

Вы можете добавить этот logi c в свою функцию startTimer:

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

Вам нужно будет установить атрибут id в <form> на theForm.

Answer 3

Внутри обратного вызова 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 
}