Foros del Web » Programando para Internet » Javascript »

Reloj en Javascript

Estas en el tema de Reloj en Javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/11/2010, 22:45
Avatar de tuka_85  
Fecha de Ingreso: febrero-2010
Ubicación: Santander/Huelva
Mensajes: 190
Antigüedad: 9 años, 9 meses
Puntos: 5
Reloj en Javascript

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>
  #2 (permalink)  
Antiguo 04/11/2010, 06:10
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 7 meses
Puntos: 836
Respuesta: Reloj en Javascript

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

Saludos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 05/11/2010, 03:18
Avatar de tuka_85  
Fecha de Ingreso: febrero-2010
Ubicación: Santander/Huelva
Mensajes: 190
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Reloj en Javascript

voy a mirar...

Gracias!
  #4 (permalink)  
Antiguo 05/11/2010, 12:57
 
Fecha de Ingreso: octubre-2010
Ubicación: por hay
Mensajes: 5
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Reloj en Javascript

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>

Etiquetas: reloj
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:04.