Relogio

[byfreak]

aí pessoal...quero fazer um relógio em PHP, com a ajuda de Javascript....

tipo...

recebe a hora pelo php e no JS fazer ela "andar"...ou seja....contar os segundos, passar e os minutos e as horas......

como um cronometro, só que começando de um determinado valor

quem tiver idéias! obrigado!

[Illidan]

Legal... isso é possível, pois você consegue passar uma variável do PHP para o Javascript:

<script>

hora = <?php echo date("H"); ?>;

minuto = <?php echo date("i"); ?>;

segundo = <?php echo date("s"); ?>;

</script>

Aí você vai teria que ir somando 1 nos segundos a cada segundo (que brilhante! hehehe)... pode utilizar as funções setInterval() ou setTimeout() pra fazer isso. E cria condições, do tipo: quando os segundos forem iguais a 60, volta pro zero e aumenta 1 nos minutos...

Até mais!

[Crystian]

tu vai fazer um relogio digital, ou de ponteiros? Se for digital é fácil, é só você colocar a hora que pegou através do php numa data nova (new Date(data)) e pegar as horas, os minutos e segundos, e depois ir atualizando com o setInterval() ou setTimeOut().

Tenta fazer e vai postando suas duvidas q agente vai te dando uma mão.

Abraço

Crystian

[Fabyo]

eu postei no outro tópico que foi fechado, e só comentei que o javascript também pega a data e hora atual e não vi necessidade de usar o php só pra isso

[byfreak]

ok galera...obrigado...

vou tentar e já posto se tiver dúvidas....

e fabyo eu quero usa o php para usar a data do servidor e não do cliente.....

só que o php não consegue por data rodando porque é no server...

e como utilizo php e js nos meus sites então tive essa idéia....

MAIS UMA VEZ OBRIGADO!

[byfreak]

ihhhh

consegui não!!!

alguém pode fazer um scriptzinho aí??

é que eu não manjo quase nada de JS só de PHP.....

VLW!

[renan_doidera]

Eu fiz um relógio analógico (de ponteiros). Com as funções as quais eu criei para construir ele, pode-se fazer muitas outras coisas que necessitem de desenhar retas e circulos.

Segue o código do arquivo "funcao_classe_relogio.js" ...

/////////////////////////////////////////////////////////////////////////////////////////////
//                       ##### Classe Para desenhos JAVASCRIPT #####                       //
//                                                                                         //
//                                                                                         //
//  Nessa classe encontram-se funções para plotar retas, circulos e um relógio             //
//                     ______________________________                                      //
//  Desenvolvido por  [   R E N A N    M A N O L A   ]   E-Mail: renan_doidera@hotmail.com //
//                    """"""""""""""""""""""""""""""                                      //
//                                                                                         //
// Fórum: https://www.scriptbrasil.com.br/forum; http://forum.wmonline.com.br/              //
//                                                                                         //
//  Por favor mantenha os créditos e bom Proveito!!!   :D                                  //
//                                                                                         //
/////////////////////////////////////////////////////////////////////////////////////////////



document.write("\n<div id=\"ponteiro1\"></div>\n<div id=\"ponteiro2\"></div>\n<div id=\"ponteiro3\"></div>\n<div id=\"circulo\"></div>\n<div id=\"marcas\"></div>"
);	


function imprime_relogio(xc,yc,cor,raio)
{

	this.xc = xc;
	this.yc = yc;
	this.cor = cor;
	this.raio = raio;


	var comprimento = raio*0.8;
	var num = 0;
	var id1 = 'ponteiro1';
	var id2 = 'ponteiro2';
	var id3 = 'ponteiro3';
	var id4 = 'circulo';

	this.comprimento = comprimento;
	this.num = num;
	this.id1 = id1;
	this.id2 = id2;
	this.id3 = id3;
	this.id4 = id4;

	javascript:tempo();

	angulo_seg = (Math.PI/2 - segundos*Math.PI/30);
	angulo_min = (Math.PI/2 - minutos*Math.PI/30);
	angulo_hor = (Math.PI/2 - horas*Math.PI/6 - minutos*Math.PI/360);

	if ( raio >= 35 && raio <= 40) imprime_marcas(xc-raio*0.05,yc+raio*0.23,raio*0.85,'green',num+3,id4,1);
	if ( raio > 40 && raio < 50) imprime_marcas(xc-raio*0.05,yc+raio*0.15,raio*0.85,'green',num+3,id4,2);
	if ( raio >= 50 && raio <= 60 ) imprime_marcas(xc-raio*0.05,yc+raio*0.13,raio*0.85,'green',num+3,id4,2);
	if ( raio >= 65 && raio <= 70) imprime_marcas(xc-raio*0.05,yc+raio*0.1,raio*0.85,'green',num+3,id4,3);
	if ( raio > 70 ) imprime_marcas(xc-raio*0.05,yc+raio*0.05,raio*0.85,'green',num+3,id4,4);

	desenha_circulo(xc,yc,raio,'gray',num+3,id4);
	inclina_reta(xc,yc,0.8*comprimento,angulo_seg,'red',num,id1);
	inclina_reta(xc,yc,0.9*comprimento,angulo_min,'black',num+1,id2);
	inclina_reta(xc,yc,0.6*comprimento,angulo_hor,'black',num+2,id3);

	setInterval("javascript:tempo(); desenho[num]=''; angulo = (Math.PI/2 - segundos*Math.PI/30); inclina_reta(xc,yc,0.8*comprimento,angulo,'red',num,id1)",1000);
	setInterval("javascript:tempo(); if(segundos == 0) { desenho[num+1]=''; angulo = (Math.PI/2 - minutos*Math.PI/30); inclina_reta(xc,yc,0.9*comprimento,angulo,'black',num+1,id2) }",1000);
	setInterval("javascript:tempo(); if(segundos == 0) { desenho[num+2]=''; angulo = (Math.PI/2 - horas*Math.PI/6 - minutos*Math.PI/360); inclina_reta(xc,yc,0.6*comprimento,angulo,'black',num+2,id3) }",1000);

}

function tempo() {
 data = new Date();
 segundos = data.getSeconds();
 minutos = data.getMinutes();
 horas = data.getHours();
 milisegundos = data.getMilliseconds();

}


function ativar_relogio(xc,yc,cor,tamanho)
{
	javascript:tempo();

	this.xc = xc;
	this.yc = yc;
	this.cor = cor;
	this.tamanho = tamanho;

	if (milisegundos == 0)
	{ javascript:imprime_relogio(xc,yc,cor,tamanho) }
	else
	{ intervalo = setInterval("javascript:tempo(); if(milisegundos == 0) { clearInterval(intervalo); javascript:imprime_relogio(xc,yc,cor,tamanho) }",1) }
}


desenho = new Array();

desenho[0] = "";
desenho[1] = "";
desenho[2] = "";
desenho[3] = "";



// ###Desenhar um PONTO###

function desenha_ponto(px,py,cor,num)
{
	desenho[num] += "\n<span style=\"position : absolute; top: "+py+"px; left: "+px+"px\"><font color=\""+cor+"\">.</font></span>";
}

// ### Distância entre dois Pontos ###

function distancia(x1,y1,x2,y2)
{

	var dist;

	dist = Math.sqrt( Math.pow( Math.abs( x1 - x2) , 2 ) +  Math.pow( Math.abs( y1 - y2) , 2 ) )
	parseFloat(dist);
	return dist;

}

// ###Desenhar uma RETA###

function desenha_reta(p1x,p1y,p2x,p2y,cor,num,id)
{


	if (p1x == p2x)
	{
  if ( p1y > p2y ) 
  {
  	var aux = p1y;
  	p1y = p2y;
  	p2y = aux;
  }
  
  for(var ay=p1y; ay<=p2y; ay += (p2y-p1y)/((distancia(p1x,p1y,p2x,p2y)/1)) ) desenha_ponto(p1x,ay,cor,num);
	}

	else      
	{
  
  if (p1x > p2x)
  {
  	var aux1 = p1x;
  	p1x = p2x;
  	p2x = aux1;
    
  	var aux2 = p1y;
  	p1y = p2y;
  	p2y = aux2;
    
  }
  
  	
  for (x=p1x; x<=p2x; x += (p2x-p1x)/( ( distancia(p1x,p1y,p2x,p2y)/1 ) ) )
  {
  	
  	var y = (   ( (p1y-p2y)/(p1x-p2x) )*x + ( (p2x*p1y-p2y*p1x)/(p2x-p1x) )    );
  	desenha_ponto(x,y,cor,num);
  	
  }
  	
	}

	document.getElementById(id).innerHTML = desenho[num];

}	
  
  
// ### Desenhar um CIRCULO ###

function desenha_circulo(px,py,raio,cor,num,id)
{

	var coef = 0;

	if ( py != px ) coef = py-px;
  

	for ( x=(px-raio); x<=(px+raio); x += 2/Math.PI ) 
	{
  y = ( Math.sqrt ( Math.pow(raio,2) - Math.pow(x-px,2) ) + py );
  desenha_ponto(y-coef,x+coef,cor,num);

  y = ( Math.sqrt ( Math.pow(raio,2) - Math.pow(x-px,2) ) + py );
  desenha_ponto(x,y,cor,num);
  
  y = ( py - Math.sqrt ( Math.pow(raio,2) - Math.pow(x-px,2) ) );
  desenha_ponto(y-coef,x+coef,cor,num);

  y = ( py - Math.sqrt ( Math.pow(raio,2) - Math.pow(x-px,2) ) );
  desenha_ponto(x,y,cor,num);
	}

	document.getElementById(id).innerHTML = desenho[num];
}

// ### Função que inclina uma reta dando o respectivo ângulo em Radianos. ###

function inclina_reta(xc,yc,tamanho,angulo,cor,num,id)
{

	var xp = xc + tamanho*Math.cos(angulo);
	var yp = yc - tamanho*Math.sin(angulo);

	desenha_reta(xc,yc,xp,yp,cor,num,id);



}

function imprime_marcas(xc,yc,tamanho,cor,num,id,num_fonte)
{

	var numero = 1;
	var angulo;

	for(angulo = Math.PI/3; angulo >= -3*Math.PI/2; angulo -= Math.PI/6)
	{
  inclina_marcas(xc,yc,tamanho,angulo,cor,num,id,numero,num_fonte);
  numero++;
	}

	document.getElementById(id).innerHTML = desenho[num];
}

function inclina_marcas(xc,yc,tamanho,angulo,cor,num,id,numero,num_fonte)
{

	var xp = xc + tamanho*Math.cos(angulo);
	var yp = yc - tamanho*Math.sin(angulo);

	desenho[num] += "\n<span style=\"position : absolute; top: "+yp+"px; left: "+xp+"px\"><font size=\""+num_fonte+"\"color=\""+cor+"\">"+numero+"</font></span>"

}

E abaixo de uma página que vai exibir o relógio...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 1</title>
</head>

<body>
<a href="javascript:;" onclick="javascript:ativar_relogio(460,140,'black',60)">Acionar Relógio</a>

<p>
<a href="javascript:;" onclick="javascript:chama()">Desenhar Cubo (pode ser que lerde um pouco esse link)</a>

<script src="funcao_classe_relogio.js">
</script>
<script>

function chama()
{

desenha_reta(400,200,520,200,'gray',3,'marcas');
inclina_reta(520,200,60,Math.PI/4,'gray',3,'marcas');
desenha_reta(562.4264068711928,157.57359312880715,562.4264068711928,37.57359312880715,'gray',3,'marcas');
desenha_reta(520,200,520,80,'gray',3,'marcas');
inclina_reta(520,80,60,Math.PI/4,'gray',3,'marcas');
desenha_reta(442.42640687119285,157.57359312880715,562.4264068711928,157.57359312880715,'gray',3,'marcas');
desenha_reta(400,200,400,80,'gray',3,'marcas');
desenha_reta(400,80,520,80,'gray',3,'marcas');
inclina_reta(400,80,60,Math.PI/4,'gray',3,'marcas');
desenha_reta(442.42640687119285,37.573593128807154,562.42640687119285,37.573593128807154,'gray',3,'marcas');
inclina_reta(400,200,60,Math.PI/4,'gray',3,'marcas');
desenha_reta(442.42640687119285,157.57359312880715,442.42640687119285,37.57359312880715,'gray',3,'marcas');

}
</script>

</p>

</body>

</html>

Falows