RELOJ DIGITAL
Este reloj digital es muy fácil. Un bucle Interval cada 1000 ms renueva
la funcion reloj(). Ésta toma hora, minutos y segundos de
Date, y en la versión 24hs los escribe en la div.
Si se trata de la version AM PM entonces ajustamos agregando un cero si es un dígito, con mm = ( mm < 10 ? "0" : "" ) + mm; para minutos y en la linea siguiente para los segundos.
Si horas es >12 le restamos 12 hhampm = ( hh > 12 ? hh-12 : hh); y si es cero le asignamos 12 hhampm = ( hh == 0 ? 12 : hhampm);, por último lo escribimos dentro de las dos divs.
Si se trata de la version AM PM entonces ajustamos agregando un cero si es un dígito, con mm = ( mm < 10 ? "0" : "" ) + mm; para minutos y en la linea siguiente para los segundos.
Si horas es >12 le restamos 12 hhampm = ( hh > 12 ? hh-12 : hh); y si es cero le asignamos 12 hhampm = ( hh == 0 ? 12 : hhampm);, por último lo escribimos dentro de las dos divs.
<head>
<script>
function reloj(){
var hoy = new Date();
var hh = hoy.getHours();
var mm = hoy.getMinutes();
var ss = hoy.getSeconds();
mm = ( mm < 10 ? "0" : "" ) + mm;
ss = ( ss < 10 ? "0" : "" ) + ss;
hhampm = ( hh > 12 ? hh-12 : hh);
hhampm = ( hh == 0 ? 12 : hhampm);
$("#AMPM").html(hhampm + ":" +mm + ":" + ss + ( hh > 12 ? " PM" : " AM"));
$("#24HS").html(hh + ":" +mm + ":" + ss );
}
$(document).ready(function(){
setInterval('reloj()', 1000);
});
</script>
<style>
.relo{
font-size:24px;
color:#666;
margin-top:30px;
}
</style>
</head>
<body>
<div style="margin-top:50px; padding:30px; width:400px; height:300px; text-align:center;">
<div id="AMPM" class="relo"></div>
<div id="24HS" class="relo"></div>
</div>
</body>