05/11/2010, 11:57
|
| | | Fecha de Ingreso: octubre-2010 Ubicación: por hay
Mensajes: 5
Antigüedad: 13 años, 6 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>
|