Countdown midnight server with PHP, vanilla js and Ajax

Question

Okay i am trying once again since last time my post got flagged as a duplicate of something entirely different than what i were asking so basically the quick stackof'ers who does this to vannilla/php questions ruined my post and i got no valid answers...

This is not a jQuery question...

This is not a Ajax response question...

(I even found my own post as googles 1st result when trying to find answers for my question)

Sample here

Basically i made a midnight countdown timer in Javascript which works perfectly...

I am trying to make it countdown to midnight of server and not the local machine, so i did a Ajax call where i echo getTime(); and i am trying to put this.responseText inside where i used now.getTime();

Javascript/Ajax

        (function () {
            var serverMilli = document.getElementById("serverMilli");
            var serverCountdown = document.getElementById("serverCountdown");

            var machineMilli = document.getElementById("machineMilli");
            var machineCountdown = document.getElementById("machineCountdown");

            let serverTime;
            var http = new XMLHttpRequest();
            var url = "time.php";
            http.open("POST", url, true);
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http.onreadystatechange = function () {
                if (http.readyState === 4 && http.status === 200) {
                    serverTime = this.responseText;
                    serverMilli.textContent = this.responseText;
                }
                ;
            };
            http.send();

            function countDownServer() {

                var now = new Date();
                var currentTime = serverTime - now.getTime();
                var eventDate = new Date();
                eventDate.setDate(now.getDate() + 1);
                eventDate.setHours(24);
                eventDate.setMinutes(0);
                eventDate.setSeconds(0);
                eventDate.setMilliseconds(0);

                var eventTime = eventDate.getTime();
                var remainingTime = eventTime - currentTime;

                var sekunder = Math.floor(remainingTime / 1000);
                var minutter = Math.floor(sekunder / 60);
                var timer = Math.floor(minutter / 60);

                sekunder %= 60;
                minutter %= 60;
                timer %= 24;

                sekunder = (sekunder < 10) ? "0" + sekunder : sekunder;
                minutter = (minutter < 10) ? "0" + minutter : minutter;
                timer = (timer < 10) ? "0" + timer : timer;

                var testServer = timer + ":" + minutter + ":" + sekunder;
                serverCountdown.textContent = testServer;
                setTimeout(countDownServer, 1000);
            }
            countDownServer();

            function countDownMachine() {

                var now = new Date();
                var currentTime = now.getTime();
                machineMilli.textContent = currentTime;
                var eventDate = new Date();
                eventDate.setDate(now.getDate() + 1);
                eventDate.setHours(24);
                eventDate.setMinutes(0);
                eventDate.setSeconds(0);
                eventDate.setMilliseconds(0);

                var eventTime = eventDate.getTime();
                var remainingTime = eventTime - currentTime;

                var sekunder = Math.floor(remainingTime / 1000);
                var minutter = Math.floor(sekunder / 60);
                var timer = Math.floor(minutter / 60);

                sekunder %= 60;
                minutter %= 60;
                timer %= 24;

                sekunder = (sekunder < 10) ? "0" + sekunder : sekunder;
                minutter = (minutter < 10) ? "0" + minutter : minutter;
                timer = (timer < 10) ? "0" + timer : timer;

                var testMachine = timer + ":" + minutter + ":" + sekunder;
                machineCountdown.textContent = testMachine;
                setTimeout(countDownMachine, 1000);
            }
            countDownMachine();
        })();

You could try this method to receive the server time without the need for ajax or server side code: https://stackoverflow.com/questions/20269657/right-way-to-get-web-server-time-and-display-it-on-web-pages — WheatBeak, Jun 02 '17 at 14:52
Don't repost an open question from yourself: https://stackoverflow.com/q/44229707/3270037, either delete that one, or delete this one, there should definitely not be both and leaving both will just cause problems for you. — Nick is tired, Jun 02 '17 at 18:31
Possible duplicate of [Cant figure out how to differ the server/local time (Midnight countdown)](https://stackoverflow.com/questions/44229707/cant-figure-out-how-to-differ-the-server-local-time-midnight-countdown) — austensen, Jun 02 '17 at 23:24
Well the post is deleted, and i will do this with ajax, no framework or nothing :) — Javaish, Jun 03 '17 at 09:37

score 0 · Answer 1 · answered Jun 03 '17 at 11:39

0

All i had to do was to do time() * 1000 because time() returns seconds and .getTime() returns milliseconds... waow cant believe i oversaw this and had so many problems, cant believe none from stf dident see this xD

answered Jun 03 '17 at 11:39

Javaish

179
14

Countdown midnight server with PHP, vanilla js and Ajax

1 Answers1