Saltar al contenido
Codifíca.me | Desarrollo web | Programación
JavaScript

Etiqueta para reloj arrastrable con JQuery

29 noviembre, 2016
jquery

Crear una etiqueta que muestre un reloj que podamos arrastrar libremente por la pantalla utilizando frameworks de JQuery.

Enlaces de interés

Este artículo se ha montado siguiento otros de esta misma wiki:

  • Crear una etiqueta html personalizada con JQuery
  • Hacer un objeto arrastrable con JQuery UI draggable
  • El setTimeout de Cuenta atrás con Javascript

Archivos

  • JQuery UI
  • index.html
  • move.png
  • script.js

jquery

JQuery UI

Lo descargamos desde JQuery UI

move.png

Es una imagen que mostraremos como control para arrastrar el reloj por la pantalla.

index.html

Este documento muestra como utilizamos el reloj, en este caso suponemos que los archivos están en la misma carpeta que el index.

<html>
<head>
	<script src="js/jquery-1.5.1.js"></script>
	<script src="js/script.js"></script>
</head>
	<body style="background-color: lightblue">
		<wikiclock xmlns='wikiclock'></wikiclock>
	</body>
</html>

script.js

Este contiene toda la lógica del comportamiento del reloj, el reconocimiento y generación del contenido de la etiqueta, la movilidad del reloj por la pantalla, etc.

/*Variables de control de tiempo*/
var timeHide;
var timeClock;
 
/*Esta funcion será la que se llame para crear cada etiqueta*/
function wikiclock(wikiclockbtn){
    wikiclockbtn.html(createWikiclock());
}
 
/*Crea la tabla con el contenido maquetado*/
function createWikiclock(){
 
    var codigo = '<div id="reloj" class="reloj"><style>' +
			'.reloj{' +
				'height: auto;' +
				'width: auto;' +
				'background-image: none;' +
			'}' +
			'.reloj .numero, .reloj .separador, .reloj .control{' +
				'font-family: Arial;' +
				'color: #2466c0;' +
				'font-size: 13px;' +
				'font-weight: bold;' +
				'text-align: center;' +
				'padding-top: 0px;' +
				'position: relative;' +
				'float: left;' +
				'height: auto;' +
				'width: auto;' +
				'background-color: transparent;' +
				'z-index: 100;' +
			'}' +
			'.control{' +
				'text-align: center;' +
				'position: relative;' +
				'vertical-align: middle;' +
				'float: left;' +
				'height: auto;' +
				'width: auto;' +
				'background-color: transparent;' +
				'z-index: 100;' +
			'}' +
			'</style>' +
			'<div class="numero" id="<" style="top:10px; left: 10px;"><</div>' +
			'<div class="numero" id="h1" style="top:10px; left: 15px;"></div>' +
			'<div class="numero" id="h2" style="top:10px; left: 20px;"></div>' +
			'<div class="separador" id="separator1" style="top:10px; left: 25px;">:</div>' +
			'<div class="numero" id="m1" style="top:10px; left: 30px;"></div>' +
			'<div class="numero" id="m2" style="top:10px; left: 35px;"></div>' +
			'<div class="separador" id="separator2" style="top:10px; left: 40px;">:</div>' +
			'<div class="numero" id="s1" style="top:10px; left: 45px;"></div>' +
			'<div class="numero" id="s2" style="top:10px; left: 50px;"></div>' +
			'<div class="numero" id=">" style="top:10px; left: 55px;">></div>' +
			'<div class="control" id="move" style="top:-10px; left: -5px;"><img src="images/move.png"></div>' +
		'</div>';
 
	return codigo;
}
 
/*Inicializa la función que parsea el Html*/
$(document).ready(function() {
	var obj=null;
 
	/*Inserta dinámicamente los js necesarios*/
	insertaJs();
 
	//Recorre todos los tipo wikiclock y crea un objeto para cada una de ellas
    jQuery("wikiclock").each(function(){
		obj=new wikiclock(jQuery(this));
	});
 
	clockInit();
});
 
/*Inserta los js necesarios*/
function insertaJs(){
	var dependencias = '<link rel="stylesheet" href="js/development-bundle/themes/base/jquery.ui.all.css">' +
	'<script src="js/development-bundle/ui/jquery.ui.core.js"></script>' +
	'<script src="js/development-bundle/ui/jquery.ui.widget.js"></script>' +
	'<script src="js/development-bundle/ui/jquery.ui.mouse.js"></script>' +
	'<script src="js/development-bundle/ui/jquery.ui.draggable.js"></script>' +
	'<link rel="stylesheet" href="js/development-bundle/demos/demos.css">';
	$("head").append(dependencias);
}
 
/*Inicializa el reloj*/
function clockInit(){
	$(".reloj").draggable();
	$(".reloj #move").hide();
 
	$(".reloj").mouseover(function(){
		clearTimeout(timeHide);
		$(".reloj #move").show();
	}).mouseout(function(){
		timeHide = setTimeout("hideMove()",1000);
	});
 
	setTimeNow();
}
 
function hideMove(){
	$(".reloj #move").hide();
}
 
/*Actualiza el reloj*/
function setTimeNow(){
	var horaminseg = new Date();
	var hora = horaminseg.getHours();
	var minuto = horaminseg.getMinutes();
	var segundo = horaminseg.getSeconds();
 
	var horastr1;
	var minutostr1;
	var segundostr1;
	var horastr2;
	var minutostr2;
	var segundostr2;
 
	if(hora<10){
		horastr1 = '0';
		horastr2 = hora;
	}else{
		horastr1 = hora.toString().substr(0, 1);
		horastr2 = hora.toString().substr(1, 1);
	}
 
	if(minuto<10){
		minutostr1 = '0';
		minutostr2 = minuto;
	}else{
		minutostr1 = minuto.toString().substr(0, 1);
		minutostr2 = minuto.toString().substr(1, 1);
	}
 
	if(segundo<10){
		segundostr1 = '0';
		segundostr2 = segundo;
	}else{
		segundostr1 = segundo.toString().substr(0, 1);
		segundostr2 = segundo.toString().substr(1, 1);
	}
 
 
	if($('#h1').html()!=horastr1){$('#h1').html(horastr1);}
	if($('#h2').html()!=horastr2){$('#h2').html(horastr2);$}
	if($('#m1').html()!=minutostr1){$('#m1').html(minutostr1);}
	if($('#m2').html()!=minutostr2){$('#m2').html(minutostr2);}
	if($('#s1').html()!=segundostr1){$('#s1').html(segundostr1);}
	if($('#s2').html()!=segundostr2){$('#s2').html(segundostr2);}
 
	timeClock = setTimeout("setTimeNow()",1000);
}