Cómo crear un contador de cuenta atrás regresiva en JavaScript

10 de diciembre de 2012
Valoración del artículo:
En este artículo veremos como crear y modificar el código en JavaScript para generar un contador de cuenta atrás regresiva.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

¿Para qué sirve esto?, pues habréis visto en muchas páginas un contador que anuncia la salida de un producto, noticia o cualquier cosa, esto es exactamente lo que aprenderemos en este tutorial mediante código JavaScript.

Lo primero que tenemos que tener en cuenta es el Script en sí, que tenemos que insertar en la cabecera, (<head></head>).

A continuación os dejamos el código, con partes en color azul y rojo, la cual será la que modificaremos posteriormente para crear el contador a nuestro gusto.

Código que irá dentro de la cabecera de nuestro sitio web

<script language="JavaScript">

var anioFinal = 2018
var mesFinal = 12
var diaFinal = 25


mesFinal -= 1
function faltan()
{
fechaFinal = new Date(anioFinal,mesFinal,diaFinal)
fechaActual = new Date()
diferencia = fechaFinal - fechaActual
diferenciaSegundos = diferencia /1000
diferenciaMinutos = diferenciaSegundos/60
diferenciaHoras = diferenciaMinutos/60
diferenciaDias = diferenciaHoras/24
diferenciaHoras2 = parseInt(diferenciaHoras) - (parseInt(diferenciaDias) *24)
diferenciaMinutos2 = parseInt(diferenciaMinutos) - (parseInt(diferenciaHoras) * 60)
diferenciaSegundos2 = parseInt(diferenciaSegundos) - (parseInt(diferenciaMinutos) * 60)
diferenciaDias = parseInt(diferenciaDias)
if (diferenciaDias < 10 && diferenciaDias > -1){diferenciaDias = "0" + diferenciaDias}
if(diferenciaHoras2 < 10 && diferenciaHoras2 > -1){diferenciaHoras2 = "0" + diferenciaHoras2}
if(diferenciaMinutos2 < 10 && diferenciaMinutos2 > -1){diferenciaMinutos2 = "0" + diferenciaMinutos2}
if(diferenciaSegundos2 < 10 && diferenciaSegundos2 > -1){diferenciaSegundos2 = "0" + diferenciaSegundos2}
if(diferenciaDias <= 0 && diferenciaHoras2<= 0 && diferenciaMinutos2 <= 0 && diferenciaSegundos2 <= 0)
{
diferenciaDias = 0
diferenciaHoras2 = 0
diferenciaMinutos2 = 0
diferenciaSegundos2 = 0

document.getElementById('tiempo').innerHTML = diferenciaHoras2 + ':' + diferenciaMinutos2 + ':' + diferenciaSegundos2
}
else{

document.getElementById('tiempo').innerHTML = diferenciaHoras2 + ':' + diferenciaMinutos2 + ':' + diferenciaSegundos2
setTimeout('faltan()',1000)
}
}

</script>
<style type="text/css">
<!--
.faltan {
font-family: Berlin Sans FB Demi;
font-size: 50px;
color: #ffffff;
background-color: #000000;
text-align: center;
font-weight: bold;

}


-->
</style>
 



Como podéis observar en color azul en la parte superior del código, ahí justo tenemos las variables de tiempo dadas en día/mes/año que podemos modifcar para poner el tiempo exacto en el que termina nuestra promoción.


Variables de Finalización de Promoción


var anioFinal = 2018
var mesFinal = 12
var diaFinal = 25
 



Y por último, tenemos el texto del código en color rojo, que nos muestra el estilo de nuestra página y que podemos modificar, para poner el tipo de letra que deseemos a nuestro contador, así como color, fondo, tamño, alineación, etc...

Código de Estilo, (letra, tamaño, color, etc...)


<style type="text/css">
<!--
.faltan {
font-family: Berlin Sans FB Demi;
font-size: 50px;
color: #ffffff;
background-color: #000000;
text-align: center;
font-weight: bold;
}


-->
</style>
 



Bueno, ya hemos visto como insertar el código o script para el contador, sólo nos queda ver la inclusión del mismo en la página.

Código para insertar el contador en la página



<table border="0" width="380" cellspacing="1">
<tr>
<td align ="center" nowrap class="faltan" width="331" height="59"><span id="tiempo">&nbsp;</span></td>
</tr>
</table>
</center>
<script>faltan()</script>
 



Como se puede observar en el código, (color azul), a lo hora de insertar nuestro contador tenemos que tener en cuenta incluir la clase, (nowrap class="faltan"), así como la identificación, ("id=tiempo").

Igualmente importanet es finalizar el código, antes del cierre del "body" con el script= <script>faltan()</script>, (color rojo).

Si habéis seguido bien todos los pasos, deberías de ver un contador regresivo como el que os dejamos de ejemplo a continuación.

 

Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 10 comentarios sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...