javascript - 有什么办法可以让页面无法刷新吗？

Question

我有一个 HTML 页面，让工作人员进入暂停时间，这段时间将从他/她的日常工作中减去。问题是，如果他/她刷新时间，计时器会自动从头开始。我希望它继续正常流动。有什么办法可以让页面无法刷新吗？也欢迎使用其他类型的解决方案。提前谢谢你。

<script>
$(".example").TimeCircles({start: true,circle_bg_color: "#FFFFFF", time: { Days: {show: false}, Hours: {show: false}, Minutes: {show: true}}})
.addListener(
function(unit,value,total) { 
    if (total == 20) { 
        document.body.style.backgroundColor = "#FFD150";

    } else if (total == 10) { 
   document.body.style.backgroundColor = "#E84141";

    } else if (total == 0) { 
   document.body.style.backgroundColor = "#000000";
    } 
} 

);

addEventListener("click", function() {
var
  el = document.documentElement
, rfs =
       el.requestFullScreen
    || el.webkitRequestFullScreen
    || el.mozRequestFullScreen
;
rfs.call(el);

});

</script>

Answer 1

由于您使用的是 PHP，因此可以使用 PHP $_SESSION变量。 SESSION 变量存在于服务器上并且对计算机是唯一的。 您还可以创建一个登录系统，它们对于登录用户来说可以是唯一的。

页面开始于:

<?php
    session_start();

在任何其他 PHP 代码之前。我建议将它放在页面的最顶部，在 <DOCTYPE> 之前声明，在任何 PHP 包含之前，在任何东西之前。

这将使您能够访问 PHP $_SESSION变量，所以你可以这样做:

<?php
    session_start();
    //Lots more PHP code in between
    $dt = date("Y-m-d H:i:s"); 
    $_SESSION['break_begin'] = $dt;

用户可以刷新页面，直到奶牛回家，时间将保持设置。当他们点击一个按钮时，您可以告诉页面创建一个“break_end”变量:

    $_SESSION['break_end'] = date("Y-m-d H:i:s");

后面可以把这两个值相减，工作时间减去停顿时间。 (见下面的引用)

请注意，一旦页面呈现，您就不能再运行任何 PHP 代码。解决这个问题的方法称为 AJAX，它非常简单。这是一个包含信息并包含指向简单示例的链接的 SO 答案:

Prevent Page Load on Jquery Form Submit with None Display Button

在你的情况下，如果你想在网页上有两个按钮，你可能需要 AJAX:Begin Coffee Break和 End Coffee Break . 单击它们不会运行任何 PHP，使用 javascript 存储时间会产生您在问题中描述的问题。但是，单击按钮可以允许 javascript 使用 AJAX...并且 AJAX 可以运行一个 PHP 文件，设置(或读取)PHP $_SESSION变量。

另一件需要考虑的事情是，如果你使用 localstorage或 js cookie，聪明的用户可以更改您的号码。 PHP 变量安全地存在于服务器上。只有服务器端代码可以更改它们。

可能有用的引用资料:

Subtracting two dates in php

how to subtract two dates and times to get difference