js/90-timers.js

   1 let offset = 0;
   2
   3 function update_timer(timer){
   4         var start = parseInt(timer.dataset.start);
   5         var stop  = parseInt(timer.dataset.stop);
   6         var value = parseInt(timer.dataset.value);
   7         var now   = Math.floor(Date.now() / 1000) + offset;
   8
   9         var left = stop - now;
  10         var total = stop - start;
  11         if(left < 0)
  12                 left = 0;
  13
  14         if(value) {
  15                 value = Math.max(value * 3 / 10, value * left / total);
  16                 timer.innerHTML = Math.floor(value);
  17         } else {
  18                 var hours = Math.floor(left / 60 / 60);
  19                 hours = hours < 10 ? '0' + hours : hours;
  20                 var minutes = Math.floor(left / 60) % 60;
  21                 minutes = minutes < 10 ? '0' + minutes : minutes;
  22                 var seconds = left % 60;
  23                 seconds = seconds < 10 ? '0' + seconds : seconds;
  24                 timer.innerHTML = hours + ':' + minutes + ':' + seconds;
  25         }
  26 }
  27
  28 $(() => {
  29         $('.timer').each(item => {
  30                 update_timer(item);
  31                 setInterval(() => update_timer(item), 1000);
  32         });
  33         let xhr = new XMLHttpRequest();
  34         xhr.open('HEAD', '/');
  35         xhr.onload = () => {
  36                 let srvtime = Date.parse(xhr.getResponseHeader('Date'));
  37                 offset = Math.ceil((srvtime - Date.now()) / 1000);
  38                 console.log("Offset from server: " + offset);
  39         };
  40         xhr.send();
  41 });