有没有办法让页面无法刷新？

Question

I have an HTML page that puts the worker on pause time which will be subtracted from his/her day job. The problem is that if he/she refreshes the time, the timer starts from the beginning automatically. I want it to continue in its normal flow. Is there any way to make the page unable to refresh? Some other kind of solution is also welcome. Thank you in advance.

<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

Since you are using PHP, you can use the PHP $_SESSION variables. SESSION variables live on the server and are unique to the computer. You can also create a login system, and they can be unique to the logged-in user.

Begin the page with:

<?php
    session_start();

before any other PHP code. I recommend placing it at the very top of the page, before the <DOCTYPE> declaration, before any PHP includes, before anything.

That will give you access to the PHP $_SESSION variables, so you can do something like:

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

The user can refresh the page till the cows come home, and the time will remain set. When they click a button, you can tell the page to create a "break_end" variable:

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

Later, you can subtract the two values and subtract the pause time from working time. (See refs below)

Note that once the page is rendered, you cannot run any more PHP code. The way around this is called AJAX, and it's pretty straight-forward. Here is an SO answer that has information, and contains links to simple examples:

Prevent Page Load on Jquery Form Submit with None Display Button

In your case, you might need AJAX if you want to have two buttons on a web page: Begin Coffee Break and End Coffee Break. Clicking them will not run any PHP, and using javascript to store the time will create the problem you describe in your question. However, clicking a button can allow javascript to use AJAX... and AJAX can run a PHP file, setting (or reading) the PHP $_SESSION variables.

Another thing to consider is that if you use localstorage or js cookies, a clever user could change the numbers on you. PHP variables live safely on the server. Only server-side code can change them.

References that may be helpful:

Subtracting two dates in php

how to subtract two dates and times to get difference