How to make a javascript code update the direct time of the server?

Navigation
1

I'm using a javascript code that loads the speaker's picture according to the date and time it's on the air. I would like the code to change the images according to the time of MY SERVER and not the user's computer, so that the photos also display correctly in another time zone. How should I proceed? Here is the code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

    function rodarImagens(){
            var current = new Date();
            var agora = current.getDay();
            var hora = current.getHours();
            var minutos = current.getMinutes();

            var locutor = document.getElementById('locutor');
switch (agora){
                    case 0: //domingo
                            if(hora >= 0 && hora < 6){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 6 && hora < 9){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 9 && hora < 12){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 12 && hora < 13){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 13 && hora < 17){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 17 && hora < 18){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 18 && hora < 24){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                    break
                    case 1: //segunda
                            if(hora >= 0 && hora < 7){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 7 && hora < 9){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 9 && hora < 12){ locutor.src = 
"/site103fm/imagenshorario/locutor1.png"}
                            if(hora >= 12 && hora < 14){ locutor.src = 
"/site103fm/imagenshorario/locutor2.png"}
                            if(hora >= 14 && hora < 16){ locutor.src = 
"/site103fm/imagenshorario/locutor3.png"}
                            if (hora == 16 && minutos < 40){locutor.src = 
"/site103fm/imagenshorario/locutor3.png"}
                            if (hora == 16 && minutos >= 40){locutor.src = 
"/site103fm/imagenshorario/locutor4.png"}
                            if(hora >= 17 && hora < 19){ locutor.src = 
"/site103fm/imagenshorario/locutor4.png"} 
                            if(hora >= 19 && hora < 24){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                    break
                    case 2: //terça

                    break        
                    case 3: //quarta

                    break
                    case 4: //quinta

                    break
                    case 5: //sexta

                    break                   
                    case 6: //sábado
                            if(hora >= 0 && hora < 8){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 8 && hora < 10){ locutor.src = 
"/site103fm/imagenshorario/operador .png"}
                            if(hora >= 10 && hora < 12){ locutor.src = 
"/site103fm/imagenshorario/locutor1.png"}
                            if(hora >= 12 && hora < 13){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                            if(hora >= 13 && hora < 17){ locutor.src = 
"/site103fm/imagenshorario/locutor5.png"}
                            if(hora >= 17 && hora < 19){ locutor.src = 
"/site103fm/imagenshorario/locutor3.png"}
                            if(hora >= 19 && hora < 24){ locutor.src = 
"/site103fm/imagenshorario/operador.png"}
                    break   
            }
            setTimeout(function(){ rodarImagens() }, 1000);
    }
    </script>
</head>

<body onload="rodarImagens()">
<img src="" id="locutor" style="right:6px;margin-top:7px;position: absolute; 
z-index: 99999999;" />
</body>
</html>
    
asked by anonymous 11.02.2018 / 01:34

1 answer

0

The fact is that pulling in real time without reloading the page can crash the script if the server in question falls, so I'll show you how to request the date and time for PHP with AJAX and no problem with CACHE and if the server comes to drop it will use the will not try to pull the server time, but the browser preventing the function from stopping Javascript.

Let's create a PHP file that always generates the time in the same format as new Date() of Javascript : realtime.php 

<?php
echo  "realtime = new Date('".date("Y-m-d\TH:i:s")."');";
?>

Now you'll create this function called realTime above the Rotate Images : 

/* Iniciar variavel com tempo caso o servidor caia */
var realtime = new Date();

function clockServer(){
    nocache = nocache.getFullYear()+""+nocache.getMonth()+""+nocache.getDay()+nocache.getHours()+nocache.getMinutes()+nocache.getSeconds();

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            /*Requistar e executar resultado do JS dinâmico*/
            eval(xhttp.responseText);
        }
        if (this.readyState == 4 && this.status == 404) {
            /*Caso o servidor caia*/
            realtime = new Date();
        }
    };
    xhttp.open("GET", "realtime.php?"+nocache, true);
    xhttp.send();
}

In the Rotate Images function change the first variable to copy a global variable that we will call te realttime: 

function rodarImagens(){
    var current = realtime;
    var agora = current.getDay();
    var hora = current.getHours();
    var minutos = current.getMinutes();

At the end of this same function replace: 

setTimeout(function(){ clockServer() }, 1200);

In the BODY HTML code replace the onload call with this: 

<body onload="clockServer()">

But in any case I advise you to take the complete modicado code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
/* Iniciar variavel com tempo caso o servidor caia */
var realtime = new Date();

function clockServer(){
	var nocache = new Date();
	nocache = nocache.getFullYear()+""+nocache.getMonth()+""+nocache.getDay()+nocache.getHours()+nocache.getMinutes()+nocache.getSeconds();

	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			/*Requistar e executar resultado do JS dinâmico*/
			eval(xhttp.responseText);
		}
		if (this.readyState == 4 && this.status == 404) {
			/*Caso o servidor caia*/
			realtime = new Date();
		}
		rodarImagens();
	};
	xhttp.open("GET", "realtime.php?"+nocache, true);
	xhttp.send();
}

function rodarImagens(){
	var current = realtime;
	var agora = current.getDay();
	var hora = current.getHours();
	var minutos = current.getMinutes();
	console.log(realtime);
    
	var locutor = document.getElementById('locutor');
	switch (agora){
		case 0: //domingo
			if(hora >= 0 && hora < 6){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 6 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 12 && hora < 13){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 13 && hora < 17){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 17 && hora < 18){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 18 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
		break
		case 1: //segunda
			if(hora >= 0 && hora < 7){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 7 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
			if(hora >= 12 && hora < 14){ locutor.src = "/site103fm/imagenshorario/locutor2.png"}
			if(hora >= 14 && hora < 16){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
			if (hora == 16 && minutos < 40){locutor.src = "/site103fm/imagenshorario/locutor3.png"}
			if (hora == 16 && minutos >= 40){locutor.src ="/site103fm/imagenshorario/locutor4.png"}
			if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor4.png"} 
			if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
		break
		case 2: //terça

		break        
		case 3: //quarta

		break
		case 4: //quinta

		break
		case 5: //sexta

		break                   
		case 6: //sábado
			if(hora >= 0 && hora < 8){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 8 && hora < 10){ locutor.src = "/site103fm/imagenshorario/operador .png"}
			if(hora >= 10 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
			if(hora >= 12 && hora < 13){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 13 && hora < 17){ locutor.src = "/site103fm/imagenshorario/locutor5.png"}
			if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
			if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
		break
	}
	setTimeout(function(){ clockServer() }, 5000);
}
    </script>
</head>

<body onload="clockServer()">
<img src="" id="locutor" style="right:6px;margin-top:7px;position: absolute; 
z-index: 99999999;" />
</body>
</html>
		case 2: //terça

		break        
		case 3: //quarta

		break
		case 4: //quinta

		break
		case 5: //sexta

		break                   
		case 6: //sábado
			if(hora >= 0 && hora < 8){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 8 && hora < 10){ locutor.src = "/site103fm/imagenshorario/operador .png"}
			if(hora >= 10 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
			if(hora >= 12 && hora < 13){ locutor.src = "/site103fm/imagenshorario/operador.png"}
			if(hora >= 13 && hora < 17){ locutor.src = "/site103fm/imagenshorario/locutor5.png"}
			if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
			if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
		break
	}
	setTimeout(function(){ realTime() }, 1000);
}
    </script>
</head>

<body onload="realTime()">
<img src="" id="locutor" style="right:6px;margin-top:7px;position: absolute; 
z-index: 99999999;" />
</body>
</html>

Look, if this method does not work I'll send the files ready for you, because the code is large and easy to get lost.

    
11.02.2018 / 14:47
Slide load at run time Datepicker BeforeShowDay using web api