02 Enero 2013 ~ 1 Comentario

Reloj hecho con Javascript y CSS

En esta oportunidad venimos a alimentar la categoría programación con un excelente tutorial desde donde podrán aprender a crear su propio reloj realizado con Javascript y embellecido con la ayuda del lenguaje CSS.

Resulta que leyendo el blog Cristalab, me he topado con un tutorial muy interesante, el cual nos brinda una serie de códigos sencillos desde los cuales podremos obtener un reloja con hora, minutero y segundos, ideal para cualquier proyecto que tengamos en mente.

reloj-javascript

Muchos portales en Internet ofrecen a sus lectores la posibilidad de informarse sobre la hora. Principalmente son las páginas web de períodicos, las encargadas de publicar un reloj para que sus visitantes puedan informarse de la hora que maneja el sitio web, debido a que según la ubicación física de las personas que manejan el sitio, se puede establecer la hora.

Éste es un elemento es muy útil implementar en nuestro sitio web, ya que ayudará mucho al visitante a estar al tanto del tiempo sin necesidad de ver la hora en el ordenador o en el celular.

Crear reloj en Javascript y CSS

Si bien aquellos webmasters que intenten crear sus propios relojes para sus sitios, pueden personalizarlo y ubicarlos en donde quieran, en un principio comenzaré a mostrarles los pasos basándome en una estructura en HTML, que será el punto de partida para lograr un bonito reloj.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="acciones.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>

<body onload="Comenzar()">
<div id="txt">
</div>
</body>
</html>

Una vez que hayamos ubicado este segmento HTML, recomendamos mantener la etiqueta ID: text, debido a que nos será de mucha utilidad para establecer los estilos en CSS:

#txt{
    font-family:sans-serif;
    font-size: 23px;
    color:green;
    background-color: black;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    border-width: 10px;
    border-color: green;
    border-radius: 25px;
    -moz-border-radius:25px;
}

Si tienen una documento en donde almacenen todas las funciones Javascript, recomiendo copiar tal cual el código que está publicado abajo, sino pueden crearlo, y recuerden que el documento debe llevar la extensión JS:

#txt{
    font-family:sans-serif;
    font-size: 23px;
    color:green;
    background-color: black;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    border-width: 10px;
    border-color: green;
    border-radius: 25px;
    -moz-border-radius:25px;
}

Una vez que hayan copiado y pegado los códigos base, obtendrán un reloj muy simple en donde se especifica la hora, los minutos y los segundos establecidos. Recomendamos jugar los los diferentes parámtros fácilmente optimizables, como ser el ancho, el fondo, tipo de fuentes, colores, y demás estilos que pueden hacer que tu reloj sea mucho más visible para los visitantes de tu sitio web.

Social Share Counters
Tags: ,
  • enderman93 .

    has puesto dos veces el css. si puedes subirlo correcto, me interesa mucho. gracias.