倒数计时器继续而不是重新开始

时间:2016-08-30 09:21:39

标签: javascript codeigniter

我为学生考试创建了一个在线系统模块。它具有多个主题和一个回答计时器。学生登录并点击主题。这将启动倒数计时器。

我的问题是浏览器页面因任何原因关闭。计时器停止,没关系。但是,当学生返回并重新启动主题时,计时器将从停止的位置继续。我希望它从原始值重新启动。

屏幕截图下方

查看:

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php echo form_open(); ?>

<?php foreach ($student_question as $value): ?>
    <input type="hidden" name="question_id" value="<?php echo $value['question_id']; ?>">
    <input type="hidden" name="examination_test_id" id="examination_test_id" value="<?php echo $value['examination_test_id']; ?>">
    <?php
    $temp = array();
    $student_result = $this->db->get_where('student_answer', array('student_id' => $student_id, 'question_id' => $value['question_id']))->row_array();
    $temp['student_examination_option_id'] = $student_result['examination_option_id'];
    ?>
<?php endforeach; ?>

<?php
$examination_test_id = $this->session->userdata('examination_test_id');
$examination_test_result = $this->db->get_where('examination_test', array('examination_test_id' => $examination_test_id))->row_array();
?>
<input type="hidden" name="time_limit" id="time_limit" value="<?php echo $examination_test_result['time_limit']; ?>">

<div class="box-body">
    <h2><p style="float: right" id="countdown"></p></h2>
    <input type="hidden" name="student_id" id="student_id" value="<?php echo $student_id; ?>">
    <table>
        <?php foreach ($result as $key => $value): ?>
            <tr>
                <td><h3><?php echo $key; ?></h3></td>
                <?php foreach ($value as $options): ?>
                <tr>
                    <td>
                        <input type="radio" name="option_id" value="<?php echo $options['examination_option_id'] ?>"
                        <?php
                        if ($temp['student_examination_option_id'] == $options['examination_option_id']) {
                            echo 'checked';
                        }
                        ?>>&nbsp;<?php echo $options['option_name']; ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            </tr>
        <?php endforeach; ?>
    </table>
    <div class="box-footer" style="float: right">
        <p><?php echo $links; ?>&nbsp;<a href="<?php echo base_url(); ?>student/Examinations/check_answer/<?php echo $examination_test_id; ?>" class="btn btn-primary" id="finish" style="font-size: 20px;">Finish</a></p>
    </div>

</div>

<?php echo form_close(); ?>

<!--<script src="<?php //echo base_url();                                                                                    ?>asset/plugins/countdowntimer/jquery.simple.timer.js"></script>-->

<script>
    $(document).ready(function () {
        $('#next').click(function () {
            var str = $("input[type='radio'],input[type='hidden']").serialize();
            $.ajax({
                async: false,
                type: 'POST',
                url: base_url + "student/Examinations/submit_answer",
                data: str,
                success: function () {

                }
            });

        });
        // });


        $examination_test_id = $("#examination_test_id").val();
        $time_limit = $("#time_limit").val();
        var d = new Date($time_limit);
        var hours = d.getHours();
        var minute = d.getMinutes();
        var minutes = hours * 60 + minute;
        var seconds = 60 * minutes;

        if (typeof (Storage) !== "undefined") {
            if (sessionStorage.seconds) {
                seconds = sessionStorage.seconds;
            }
        }
        function secondPassed() {
            var hours = Math.floor(seconds / 3600);
            var minutes = Math.floor((seconds - (hours * 3600)) / 60);
            //   var remainingSeconds = seconds - (hours * 3600) - (minutes * 60);
            var remainingSeconds = seconds % 60;

            if (remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }

            if (typeof (Storage) !== "undefined") {
                sessionStorage.setItem("seconds", seconds);
            }

            document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;

            if (seconds == 0) {
                clearInterval(myVar);
                document.getElementById('countdown').innerHTML = alert('Timeout');
                window.location.href = base_url + "student/Examinations/check_answer/" + $examination_test_id;

                if (typeof (Storage) !== "undefined") {
                    sessionStorage.removeItem("seconds");
                }
            } else {
                seconds--;
            }
        }
        var myVar = setInterval(secondPassed, 1000);
    });

</script>
<style>
    .btn-primary a{
        font-size: 20px;
        color: #ffffff;
    }
</style>

查看:

{{1}}

请检查我的JavaScript代码。

0 个答案:

没有答案