CODEWITHSUNDEEP
javascriptcountdowncountdowntimer
Mats
Mats

Reputation: 13

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

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>

Upvotes: 1

Views: 1041

Answers (3)

Osama
Osama

Reputation: 3040

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

Upvotes: 0

Kody R.
Kody R.

Reputation: 2460

You're going to want to convert to whatever timezone the server is using (should be using UTC/GMT).

function convertUTCToLocal(dateFromServer) {
    var now = new Date();
    return dateFromServer.setMinutes(dateFromServer.getMinutes - now.getTimezoneOffset());
}

Upvotes: 1

Vaughn Kottler
Vaughn Kottler

Reputation: 31

What server operating system and web server software are you using?

Instead of initializing the time in JavaScript, you could send the client the page with an initialized time that gets resolved in the moment the user requested the page with PHP, but if you want the server to count down for you you would need to write an XML HttpRequest to continue requesting the current time on an interval.

Upvotes: 1

Related Questions