Crearemos un Reloj Digital

Lo que vamos a hacer es crear dos archivo uno  CSS y el otro HTML

La descargar del archivo esta abajo

Lo primero que haremos es crear el archivo CSS, le damos un nombre por ejemplo ESTILO.CSS

 

BODY {
BACKGROUND-COLOR: Black;
FONT-SIZE: 20px;
FONT-FAMILY: arial; }
.clock {
BORDER: White 9px double;
COLOR: white;
FONT-FAMILY: Arial;
BORDER-COLLAPSE: collapse;
BACKGROUND-COLOR: ROYALBLUE;

-webkit-border-radius: 50px 50px;/* Para Zafari */
-moz-border-radius: 50px 50px;/* Para Mozilla*/
-ms-border-radius: 50px 50px;/* Para IE */
-0-border-radius: 50px 50px;/* Para Opera */


}
.time { FONT-SIZE: 50px;

-webkit-border-radius: 50px 50px;/* Para Zafari */
-moz-border-radius: 50px 50px;/* Para Mozilla*/
-ms-border-radius: 50px 50px;/* Para IE */
-0-border-radius: 50px 50px;/* Para Opera */

}
.clock TD {    
COLOR: White;
TEXT-ALIGN: center;
BORDER: yellow 5px Double;
BORDER-COLLAPSE: collapse;

-webkit-border-radius: 50px 50px;/* Para Zafari */
-moz-border-radius: 50px 50px;/* Para Mozilla*/
-ms-border-radius: 50px 50px;/* Para IE */
-0-border-radius: 50px 50px;/* Para Opera */
}
B { COLOR: White;
FONT-SIZE: 20px;

-webkit-border-radius: 50px 50px;/* Para Zafari */
-moz-border-radius: 50px 50px;/* Para Mozilla*/
-ms-border-radius: 50px 50px;/* Para IE */
-0-border-radius: 50px 50px;/* Para Opera */

}
#centro {
COLOR:white;
TEXT-ALIGN: center;
MARGIN: 0px auto;
WIDTH: 600px;
BORDER: RoyalBlue 5px Double;
-webkit-border-radius: 50px 50px;/* Para Zafari */
-moz-border-radius: 50px 50px;/* Para Mozilla*/
-ms-border-radius: 50px 50px;/* Para IE */
-0-border-radius: 50px 50px;/* Para Opera */
}

Ahora lo que vamos a hacer es crear el Archi HTML le dan un nombre por ejemplo RELOJ.HTML

<html>
<head>
<title>Reloj Digital por:TheMasterCar3d</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="ESTILO.CSS" type="text/css">
<script language="JavaScript">
function time() {
var today = new Date();
var hrs = today.getHours();
var min = today.getMinutes();
var secs = today.getSeconds();
var alsohrs = today.getHours();
var dayNumber = today.getDate();
var year = today.getFullYear();
var ampm="";
var zero="0";
var month = today.getMonth() +1;
var weekday = today.getDay();
var wdn = new Array(7)
wdn[0] = "DOMINGO";
wdn[1] = "LUNES";
wdn[2] = "MARTES";
wdn[3] = "MIERCOLES";
wdn[4] = "JUEVES";
wdn[5] = "VIERNES";
wdn[6] = "SABADO";
//Declaración que pone 'el 0s' delante de solos minutos o segundos.
if (min<10)
{min=zero+min;}
if (secs<10)
{secs=zero+secs;}
//Declaración que elimina Tiempo Métrico
if (hrs>12)
{hrs=eval(hrs - 12);}
if (hrs>=0 && hrs<1)
{hrs=12}
//Declaración de P.M.
if (alsohrs>=12 && alsohrs<24)
{ampm="P.M.";}
//Declaración de A.M.
if (alsohrs<12 && alsohrs>=0)
{ampm="A.M.";
}tmp='<table width="60%" class="clock"><tr><td class="time" colspan="4">';
tmp+=hrs+'<span id="blinker">:</span>'+min;
tmp+='<font size="10"> '+ampm+'</font>';
tmp+='<tr><td><font size="-1">MES</font><br><b>'+month+'</b></td>';
tmp+='<td><font size="-1">FECHA</font><br><b>'+dayNumber+'</b></td>';
tmp+='<td><font size="-1">DÍA</font><br><b>'+wdn[weekday]+'</b></td>';
tmp+='<td><font size="-1">AÑO</font><br><b>'+year+'</b></td></tr></table>';
document.getElementById("clockgoeshere").innerHTML=tmp;
clocktime=setTimeout("time()","1000");
}
function blink() {
var obj = document.getElementById("blinker");
if (obj.style.visibility == "visible") {
obj.style.visibility="hidden";
}
else {
obj.style.visibility="visible";
}
eachsecond=setTimeout("blink()","500");
}
</script>
</head>
<body onload="time(); blink();">
<center><div id="clockgoeshere">
<table class="clock" width="60%">
<tbody><tr>
<td class="time" colspan="4">4
<span id="blinker">:</span>51<font size="10"> P.M.</font></td></tr><tr><td><font size="-1">MES</font><br><b>6</b></td><td><font size="+1">FECHA</font><br><b>5</b></td><td><font size="-1">DÍA</font><br><b>MIE</b></td><td><font size="+1">AÑO</font><br><b>2013</b></td></tr></tbody></table></div></center>
<br><center>
<div id="centro">
<h1>Vamos a crear este hermoso reloj</h1>
</div>
</body></html>

Descarga
Reloj_Digital.rar
Reloj_Digital.rar
Archivo comprimido 20.4 KB