title: How to force stop count down clock when 1-4 seconds remaining? JavaScript
body: <p>I am creating a clock count down timer, all is working but only one problem is occurring.</p>
  <p>When the time is 1 second to 2-4 seconds then if I click or navigate to other page in my website, then it will reset to 24 hours of time. How can I fix this issue?</p>
  <p>Is there any way to achieve this? - I am fetching the duration to my table in my database and minus it with the local time now that I have in my timezone.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Set the date we're counting down to
  // 1. JavaScript
  var countDownDate = new Date("Aug 20, 2022 20:00:00").getTime();
  var now = new Date().getTime();
  // 2. PHP
  //var countDownDate = &lt;?php echo strtotime(''.$period['duration'].'') ?&gt; * 1000;
  //var now = &lt;?php echo time() ?&gt; * 1000;
  
  // Update the count down every 1 second
  var x = setInterval(function() {
  
    // Get todays date and time
    // 1. JavaScript
    // var now = new Date().getTime();
    // 2. PHP
    now = now + 1000;
  
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
  
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) - 6;
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
    // if (hours &lt; 0) hours += 24;
  
    var period_id = $("#period_id").val();
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = "&lt;i class='fa fa-clock-o'&gt;&lt;/i&gt; Due on: " + days + "d " + hours + "h " +
      minutes + "m " + seconds + "s ";
  
    // If the count down is over, write some text 
    // if (distance &lt; 0) {
    //     clearInterval(x);
    //     document.getElementById("demo").innerHTML = "EXPIRED";
    // }
    if (days &lt; 0 &amp;&amp; hours &lt; 0 &amp;&amp; minutes &lt; 0 &amp;&amp; seconds &lt; 0) {
      document.getElementById("demo").innerHTML = "&lt;i class='fa fa-bell'&gt;&lt;/i&gt;";
    }
  
    if (days == 0 &amp;&amp; hours == 0 &amp;&amp; minutes == 0 &amp;&amp; seconds == 0) {
      console.log("Ajaxing")
      return
      $.ajax({
        url: "&lt;?php echo base_url(); ?&gt;submissions/lock",
        method: "POST",
        cache: false,
        data: {
          period_id: period_id
        },
        success: function(data) {
          $('#myModal').modal('show');
          clearInterval(x);
          document.getElementById("demo").innerHTML = "&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; EXPIRED";
          return true;
        },
        error: function() {
          alert('Could not get Data from Database');
        }
      });
    }
  }, 1000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="demo"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>