Interesante: Vídeo Tutorial de Javascript, aprende a programar Javascript desde cero.
A continuación puedes ver un ejemplo de como obtener la hora con Javascript y crear un reloj digital para tu web ...
:
|
:
|
Para ello hay que llamar al objeto Date();
var tiempo = new Date();
Y posteriormente obtener la hora, minutos y segundos ...
var hora = tiempo.getHours();
var minuto = tiempo.getMinutes();
var segundo = tiempo.getSeconds();
El código completo del reloj es el siguiente ...
<html>
<head>
<style>
#reloj
{
border-radius: 5px;
color: #FFFFFF;
font-family: Arial, Verdana;
font-weight: bold;
background: -webkit-linear-gradient(left, black, red);
background: -moz-linear-gradient(left, black, red);
background: -o-linear-gradient(left, black, red);
background: linear-gradient(left, black, red);
box-shadow: 2px 2px 2px grey;
padding: 5px;
}
</style>
</head>
<body>
<table id="reloj" border='0'>
<tr>
<td><div id='hora'></div></td>
<td><div>:</div></td>
<td><div id='minuto'></div></td>
<td><div>:</div></td>
<td><div id='segundo'></div></td>
</tr>
</table>
<script type="text/javascript">
Reloj();
function Reloj() {
var tiempo = new Date();
var hora = tiempo.getHours();
var minuto = tiempo.getMinutes();
var segundo = tiempo.getSeconds();
document.getElementById('hora').innerHTML = hora;
document.getElementById('minuto').innerHTML = minuto;
document.getElementById('segundo').innerHTML = segundo;
setTimeout('Reloj()', 1000);
str_hora = new String(hora);
if (str_hora.length == 1) {
document.getElementById('hora').innerHTML = '0' + hora;
}
str_minuto = new String(minuto);
if (str_minuto.length == 1) {
document.getElementById('minuto').innerHTML = '0' + minuto;
}
str_segundo = new String(segundo);
if (str_segundo.length == 1) {
document.getElementById('segundo').innerHTML = '0' + segundo;
}
}
</script>
</body>
</html>
Si te ha gustado este post tal vez te intese saber como obtener la fecha -> Obtener la fecha con Javascript
Keywords: hora, tiempo, segundos, minutos, reloj, javascript, jquery, Date, getHours, getMinutes, getSeconds, función, digital
No hay comentarios:
Publicar un comentario