1

私はオンラインの時限試験をコーディングしており、タイマーを実行するために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 になっても、試験を提出できず、代わりに負のタイマーが実行されています!! 私を助けてください！！

4

2 に答える 2

2

問題は、2 番目のコードの変数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 デバッガーを使用することです。

于 2013-08-25T12:53:09.173 に答える