我正在编写在线定时考试，并且为了运行计时器，我正在使用 JS!定时器启动并计算时间并在定时器超时时提交考试的代码如下:
<script>
//Once the complete page is loaded the GIF image disappears and questions are displayed
function StartTimer()
{
document.getElementById('Loading').style.display = "none";
document.getElementById('Loaded').style.display = "block";
document.getElementById('1').style.display = "block";
document.getElementById('qustn1').style.backgroundColor="#dd6e23";
}
//Sets the Interval to the time
var ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
function submitForm()
{
document.getElementById("submit").submit();
}
function calculate_time()
{
var end_time = "<?php echo $_SESSION["start_time"]; ?>"; // Get end time from session variable (total time in seconds).
var dt = new Date(); // Create date object.
var time_stamp = dt.getTime()/1000; // Get current minutes (converted to seconds).
var total_time = end_time - Math.round(time_stamp); // Subtract current seconds from total seconds to get seconds remaining.
var mins = Math.floor(total_time / 60); // Extract minutes from seconds remaining.
var secs = total_time - (mins * 60); // Extract remainder seconds if any.
if(secs < 10){secs = "0" + secs;} // Check if seconds are less than 10 and add a 0 in front.
document.getElementById("txt").value = mins + ":" + secs; // Display remaining minutes and seconds.
// Check for end of time, stop clock and display message.
if(mins <= 0)
{
if(secs <= 0 || mins < 0)
{
clearInterval(ct);
document.getElementById("txt").value = "0:00";
submitForm();
}
}
}
上面的代码运行良好，即使计时器到期，考试也会自动提交。但是，我试图在主体完全加载后调用 setTimeOut() 和 setInterval() 方法，即 setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);应该在startTimer()中。
<body onload="StartTimer()">
......
<script>
.....
function StartTimer()
{
document.getElementById('Loading').style.display = "none";
document.getElementById('Loaded').style.display = "block";
document.getElementById('1').style.display = "block";
document.getElementById('qustn1').style.backgroundColor="#dd6e23";
var ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
}
.....
</script>
但是当我这样做时，我无法准确执行代码。即使计时器到达 0:00，也无法提交考试，而是负计时器正在运行!请帮助我!!
最佳答案
问题是第二个代码中变量 ct 的范围不正确。实际上，您应该将此变量放在可用于 *calculate_time* 函数的上下文中。
例如，您可以尝试以下代码，将变量 ct 移动到最外层范围:
<body onload="StartTimer()">
......
<script>
.....
var ct = null;
function StartTimer() {
document.getElementById('Loading').style.display = "none";
document.getElementById('Loaded').style.display = "block";
document.getElementById('1').style.display = "block";
document.getElementById('qustn1').style.backgroundColor="#dd6e23";
ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
}
function submitForm() {
document.getElementById("submit").submit();
}
function calculate_time() {
var end_time = "<?php echo $_SESSION["start_time"]; ?>"; // Get end time from session variable (total time in seconds).
var dt = new Date(); // Create date object.
var time_stamp = dt.getTime()/1000; // Get current minutes (converted to seconds).
var total_time = end_time - Math.round(time_stamp); // Subtract current seconds from total seconds to get seconds remaining.
var mins = Math.floor(total_time / 60); // Extract minutes from seconds remaining.
var secs = total_time - (mins * 60); // Extract remainder seconds if any.
if(secs < 10){secs = "0" + secs;} // Check if seconds are less than 10 and add a 0 in front.
document.getElementById("txt").value = mins + ":" + secs; // Display remaining minutes and seconds.
// Check for end of time, stop clock and display message.
if(mins <= 0) {
if(secs <= 0 || mins < 0) {
clearInterval(ct);
document.getElementById("txt").value = "0:00";
submitForm();
}
}
}
.....
</script>
......
</body>
找到此类问题根源的最佳方法是使用像 FireBug 这样的 JavaScript 调试器这将很容易查明问题的根源。
关于javascript - 使用 Javascript 的在线测验计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18427731/