Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

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);
}