【问题标题】:How to get a countdown timer to restart如何让倒数计时器重新启动
【发布时间】:2016-08-22 13:12:34
【问题描述】:

我正在创建一个在线考试系统。

我点击应用按钮,然后倒计时开始。一段时间后,浏览器页面关闭。单击相同的考试名称后,倒数计时器会从停止的地方继续,但我希望时间从头开始。请看下面的截图:

查看:

    <h2><p style="float: right" id="countdown"></p></h2>

<a href="<?php echo base_url(); ?>student/Examinations/apply_examinations/<?php echo $value['examination_test_id']; ?>" class="btn btn-primary" id="apply" onclick="resetCountdownInLocalStorage();">Apply</a>

    <script>
        $(document).ready(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);
        });

function resetCountdownInLocalStorage() {
        sessionStorage.removeItem("seconds");
    }
    </script>

【问题讨论】:

  • 我不太明白你目前的问题。但是,当您关闭浏览器并重新打开它时,您的“状态”就会丢失。您正在有效地重新运行整个程序。如果您想在重新打开页面后“继续”,则需要将该信息存储在某处
  • @DylanMeeus 请给你写代码
  • @DylanMeeus 首先看截图,点击应用按钮后计时器开始,有时浏览器页面关闭,几分钟后我点击相同的考试名称应用,然后倒数计时器开始继续,不开始
  • @Dylan Meeus 帮帮我

标签: javascript php codeigniter


【解决方案1】:

这可能取决于浏览器,根据link

浏览上下文的生命周期可能与 实际的用户代理进程本身,因为用户代理可能支持 重启后恢复会话。

我认为您可能需要在标签关闭时清理会话存储。

【讨论】:

  • 我点击应用按钮,所以应用按钮触发 onclick 事件,第二个事件将在会话存储中删除
  • 首先看截图,点击应用按钮后计时器开始,有时浏览器页面关闭,几分钟后我点击相同的考试名称应用,然后倒数计时器开始继续,而不是开始
  • 如果没有更多细节,很难为您提供帮助。你浏览点击应用吗?您是否停留在同一页面上?你打开一个新标签吗?
  • @Mathieu 我点击应用然后页面刷新和计时器开始
  • @Mathieu 没有打开新标签
猜你喜欢
  • 2019-10-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-08
  • 1970-01-01
  • 2015-12-20
  • 1970-01-01
相关资源
最近更新 更多