Reloj en Javascript

tuka_85 · #1 (**permalink**) 03/11/2010, 21:45

Hola gente.

Soy principiante en Javascript, y necesito una cosa tengo este problema:

Crear un reloj javascript con doble funcionalidad:
a) Mostrar la hora, en un campo de texto, con el formato HH:MM:SS y se actualice
cada segundo de manera dinámica.
b) Permitirá que el usuario lo sitúe en unas determinadas coordenadas de pantalla
haciendo clic sobre el y desplazando el ratón hasta el punto de destino deseado, para de nuevo hacer clic y soltarlo.

Pero lo de las coordenadas no tengo ni idea de como se hace, el reloj lo he hecho, para que lo echeis un ojo os pego el codigo, y a ver si me decis como terminarlo:

Código:


<html> 
<head> 
<title>Reloj con Javascript</title> 
<script language="JavaScript"> 
function mueveReloj(){ 
   	momentoActual = new Date() 
   	hora = momentoActual.getHours() 
   	minuto = momentoActual.getMinutes() 
   	segundo = momentoActual.getSeconds() 

   	horaImprimible = hora + " : " + minuto + " : " + segundo 

   	document.form_reloj.reloj.value = horaImprimible 

   	setTimeout("mueveReloj()",1000) 
} 
</script> 
</head> 

<body onload="mueveReloj()"> 


<center>
<h2> RELOJITO!</h2>
<br><br><br>
<form name="form_reloj"> 
<input type="text" name="reloj" size="10"> 
</form> 
</center>
</body> 
</html>

David · #2 (**permalink**) 04/11/2010, 05:10

Busca sobre drag drop javascript y encontrarás ejemplos de cómo hacerlo.

Saludos.

tuka_85 · #3 (**permalink**) 05/11/2010, 02:18

voy a mirar...

Gracias!

zarpen · #4 (**permalink**) 05/11/2010, 11:57

Para agarrar y arrastrar

Código:

<html onmousemove="javascript:desplaza(event)"> 
	<head> 
	<title>Reloj con Javascript</title> 
	<script language="JavaScript">
	var mueve = false;
	var contenedor,reloj;
	
	function on_off(e){
		try{ e.preventDefault();}catch(err){}
		if(mueve == true){
			mueve = false;
			contenedor.style["z-index"] = "auto";
		}else{
			mueve = true;
			contenedor.style["z-index"] = 100;
		}
	}
	function init(){
		contenedor = document.getElementById("contenedor");
		reloj = document.getElementById("reloj");
		mueveReloj();
	}
	function mueveReloj(){
		momentoActual = new Date(); 
		hora = momentoActual.getHours(); 
		minuto = momentoActual.getMinutes(); 
		segundo = momentoActual.getSeconds(); 

		horaImprimible = hora + " : " + minuto + " : " + segundo; 
		reloj.innerHTML = horaImprimible;
		
		setTimeout("mueveReloj()",1000);
	} 
	
	function desplaza(e){
		if(mueve == true){
			if(document.selection) document.selection.clear();
			var m_x = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
			var m_y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
			contenedor.style["left"] = ""+(m_x-contenedor.offsetWidth/2)+"px";
			contenedor.style["top"] = ""+(m_y-contenedor.offsetHeight/2)+"px";
		}
	}
	</script> 
	</head> 
	<body onload="init()"> 
		<center>
		<h2> RELOJITO!</h2>
		<br><br><br>
		<div id="contenedor" style="position:absolute;">
			<p id="reloj" style="cursor:move;" onmousedown="javascript:on_off(event)" onmouseup="javascript:on_off(event)"></p>
		</div>
	</center>
	</body> 
</html>

Para coger y soltar

Código:

<p id="reloj" style="cursor:move;" onclick="javascript:on_off(event)"></p>