want to sync a javascript countdown to server time, not to client time

Question

I want my time to count down to one time for every client (server time) and not to the time they have on their computer. This is my countdown, how do i do this ?

This is the timer that should count down to one date for everybody so everybody around the would see the timer drops to 0 at the same time.

        <script type="text/javascript">
        var ringer = {
          countdown_to: "07/20/2017 6:00 PM",
          rings: {
            'DAYS': { 
              s: 86400000, // mseconds in a day,
              max: 365
            },
            'HOURS': {
              s: 3600000, // mseconds per hour,
              max: 24
            },
            'MINUTES': {
              s: 60000, // mseconds per minute
              max: 60
            },
            'SECONDS': {
              s: 1000,
              max: 60
            }
           },
          r_count: 4,
          r_spacing: 10, // px
          r_size: 200, // px
          r_thickness: 30, // px
          update_interval: 11, // ms


          init: function(){

            $r = ringer;
            $r.cvs = document.createElement('canvas'); 

            $r.size = { 
              w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
              h: ($r.r_size + $r.r_thickness) 
            };



            $r.cvs.setAttribute('width',$r.size.w);           
            $r.cvs.setAttribute('height',$r.size.h);
            $r.ctx = $r.cvs.getContext('2d');
            $(".countdownwrap").append($r.cvs);
            $r.cvs = $($r.cvs);    
            $r.ctx.textAlign = 'center';
            $r.actual_size = $r.r_size + $r.r_thickness;
            $r.countdown_to_time = new Date($r.countdown_to).getTime();
            $r.cvs.css({ maxWidth: $r.size.w+"px", maxHeight: $r.size.h+"px",width: "90%", height: "19%"});
            $r.go();
          },
          ctx: null,
          go: function(){
            var idx=0;

            $r.time = (new Date().getTime()) - $r.countdown_to_time;


            for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);      

            setTimeout($r.go,$r.update_interval);
          },
          unit: function(idx,label,ring) {
            var x,y, value, ring_secs = ring.s;
            value = parseFloat($r.time/ring_secs);
            $r.time-=Math.round(parseInt(value)) * ring_secs;
            value = Math.abs(value);

            x = ($r.r_size*.5 + $r.r_thickness*.5);
            x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
            y = $r.r_size*.5;
            y += $r.r_thickness*.5;


            // calculate arc end angle
            var degrees = 360-(value / ring.max) * 360.0;
            var endAngle = degrees * (Math.PI / 180);

            $r.ctx.save();

            $r.ctx.translate(x,y);
            $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

            // first circle
            $r.ctx.strokeStyle = "rgba(10,22,51, 1)";
            $r.ctx.beginPath();
            $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
            $r.ctx.lineWidth =$r.r_thickness;
            $r.ctx.stroke();

            // second circle
            $r.ctx.strokeStyle = "rgba(23,149,210,1)";
            $r.ctx.beginPath();
            $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1);
            $r.ctx.lineWidth =$r.r_thickness;
            $r.ctx.stroke();

            // label
            $r.ctx.fillStyle = "#fff";

            $r.ctx.font = '16px Helvetica';
            $r.ctx.fillText(label, 0, 40);


            $r.ctx.font = 'bold 80px Helvetica';
            $r.ctx.fillText(Math.floor(value), 0, 18);

            $r.ctx.restore();
          }
        }

        ringer.init();
    </script>

Answer 1

var xmlHttp;
    function srvTime(){
    try {
        //FF, Opera, Safari, Chrome
        xmlHttp = new XMLHttpRequest();
    }
    catch (err1) {
        //IE
        try {
            xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                xmlHttp = new ActiveXObject('Microsoft.
            catch (eerr3) {
                //AJAX not supported, use CPU time.
                alert("AJAX not supported");
            }
        }
    }
                 xmlHttp.open('HEAD',window.location.href.toString(),false);
xmlHttp.setRequestHeader("Content-Type", "text/html");
xmlHttp.send('');
return xmlHttp.getResponseHeader("Date");
}

var st = srvTime();
var date = new Date(st);

I found this solution for what you want to do by using Ajax