title: Recurring Countdown Timer for every 18h with specific start date
body: <p>I have a small fan website dedicated to a certain game. Now in that game there are two live events that reset after some period of time. First one resets every 18h and the other one resets every week (on the same day at the same time). I have been working on a script to put on the site to show when the next event reset is. I have made it work for the most part:</p>
  
  <p><strong>timer.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script src="timer.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="daily"&gt;
    &lt;p &gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="weekly"&gt;
    &lt;p &gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
  #daily, #weekly {
    background: #333;
    font-family: 'Lato', sans-serif;
    text-align: center;
    color: #eee;
    text-shadow: 1px 1px 5px black;
    padding: 1rem 0;
    font-size: 3rem;
    border: 1px solid #000;
  }
  </code></pre>
  
  <p><strong>timer.js</strong></p>
  
  <pre><code>setInterval(function time(){
  
  // Get strating and current date
  var startDate = new Date("January 7, 2016 07:00:00");
  var currentDate = new Date();
  
  // Calcualte time passed since the start
  var timePassed = currentDate.getTime() - startDate.getTime();
  var convertToSeconds = Math.floor(timePassed / 1000 );
  var convertToMinutes = Math.floor(convertToSeconds / 60);
  var convertToHours = Math.floor(convertToMinutes / 60);
  var convertToDays = Math.floor(convertToHours / 24);
  
  // Calculate time since last daily (18h) reset
  var lastResetSeconds = convertToSeconds % 60;
  var lastResetMinutes = convertToMinutes % 60;
  var lastResetHoursDaily = convertToHours % 18;
  
  // Calculate time since last weekly (7d) reset
  var lastResetHoursWeekly = convertToHours % 24;
  var lastResetDay = convertToDays % 7;
  
  // Calculate remaining time until next daily (18h) reset
  var remainingSeconds = 59 - lastResetSeconds;
  var remainingMinutes = 59 - lastResetMinutes;
  var remainingHoursDaily = 17 - lastResetHoursDaily;
  
  // Calculate remaining time until next weekly (7d) reset
  var remainingHoursWeekly = 23 - lastResetHoursWeekly;
  var remainingDays = 6 - lastResetDay;
  
  // If any of the variables is only a single digit number, then add 0 before
  if((remainingSeconds + '').length == 1){
    remainingSeconds = '0' + remainingSeconds;
  }
  if((remainingMinutes + '').length == 1){
    remainingMinutes = '0' + remainingMinutes;
  }
  if((remainingHoursDaily + '').length == 1){
    remainingHoursDaily = '0' + remainingHoursDaily;
  }
  if((remainingHoursWeekly + '').length == 1){
    remainingHoursWeekly = '0' + remainingHoursWeekly;
  }
  if((remainingDays + '').length == 1){
    remainingDays = '0' + remainingDays;
  }
  
  // Print
  jQuery('#daily p').html(remainingHoursDaily+':'+remainingMinutes+':'+remainingSeconds)
  jQuery('#weekly p').html(remainingDays+':'+remainingHoursWeekly+':'+remainingMinutes+':'+remainingSeconds)
  }, 1000);
  </code></pre>
  
  <p><strong>Timezone Problem</strong></p>
  
  <p>JS calculates client side time and not server side and this is a problem. This is an event that started on a certain date at certain time in PDT zone, and has restarted itself every 18h. So when I view this page I get time calculated from starting and current date BUT from my timezone and not the one from the server.</p>
  
  <p>What I'm looking for here is that starting date and current date are used from server and not the client. Now, I'm aware that JS is client side run, so what I need is a workaround.</p>
  
  <p>I then attempted something with php which resulted in same problem as remaining time seems to be far off. To add further to the list of problems, the jQuery no longer counts down, instead it just shows remaining time it got while loading script/page.</p>
  
  <p><strong>timer.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  
      date_default_timezone_set('America/Los_Angeles');
      $rawDateStart = date('F j, Y H:i:s', date_timestamp_get(DateTime::createFromFormat('F j, Y H:i:s', 'January 7, 2016 07:00:00')));
      $rawDateCurrent = date('F j, Y H:i:s');
  ?&gt;
  
  &lt;script&gt;
  setInterval(function time(){
  
      // Get strating and current date
      //var startDate = new Date("January 7, 2016 07:00:00");
      //var currentDate = new Date();
      var startDate = new Date("&lt;? echo $rawDateStart; ?&gt;");
      var currentDate = new Date("&lt;? echo $rawDateCurrent; ?&gt;");
  
      // Calcualte time passed since the start
      var timePassed = currentDate.getTime() - startDate.getTime();
      var convertToSeconds = Math.floor(timePassed / 1000 );
      var convertToMinutes = Math.floor(convertToSeconds / 60);
      var convertToHours = Math.floor(convertToMinutes / 60);
      var convertToDays = Math.floor(convertToHours / 24);
  
      // Calculate time since last daily (18h) reset
      var lastResetSeconds = convertToSeconds % 60;
      var lastResetMinutes = convertToMinutes % 60;
      var lastResetHoursDaily = convertToHours % 18;
  
      // Calculate time since last weekly (7d) reset
      var lastResetHoursWeekly = convertToHours % 24;
      var lastResetDay = convertToDays % 7;
  
      // Calculate remaining time until next daily (18h) reset
      var remainingSeconds = 59 - lastResetSeconds;
      var remainingMinutes = 59 - lastResetMinutes;
      var remainingHoursDaily = 17 - lastResetHoursDaily;
  
      // Calculate remaining time until next weekly (7d) reset
      var remainingHoursWeekly = 23 - lastResetHoursWeekly;
      var remainingDays = 6 - lastResetDay;
  
      // If any of the variables is only a single digit number, then add 0 before
      if((remainingSeconds + '').length == 1){
        remainingSeconds = '0' + remainingSeconds;
      }
      if((remainingMinutes + '').length == 1){
        remainingMinutes = '0' + remainingMinutes;
      }
      if((remainingHoursDaily + '').length == 1){
        remainingHoursDaily = '0' + remainingHoursDaily;
      }
      if((remainingHoursWeekly + '').length == 1){
        remainingHoursWeekly = '0' + remainingHoursWeekly;
      }
      if((remainingDays + '').length == 1){
        remainingDays = '0' + remainingDays;
      }
  
      // Print
      jQuery('#daily p').html(remainingHoursDaily+':'+remainingMinutes+':'+remainingSeconds)
      jQuery('#weekly p').html(remainingDays+':'+remainingHoursWeekly+':'+remainingMinutes+':'+remainingSeconds)
  }, 1000);
  &lt;/script&gt;
  
  &lt;div id="daily"&gt;&lt;p &gt;&lt;/p&gt;&lt;/div&gt;
  &lt;div id="weekly"&gt;&lt;p &gt;&lt;/p&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So I'm stuck and without any ideas how to proceed. Any pointers would be welcome. I'm honestly having hard time with time / date stuff.</p>