Genesis Vargas J

Como hacer un conteo regresivo en HTML5, CSS3 y Javascript (Tutorial/Código Fuente)

Comparte:

Hola amigos, tiempo sin publicar por aquí pero el trabajo me lo impedía. En esta ocasión les enseñaré como hacer un conteo regresivo en HTML5, Javascript y CSS3 para mostrarles a los visitantes de nuestra página web cuando estara disponible un producto, un servicio o la nueva versión de la propia página web; En este ejemplo haré un conteo regresivo de cuando inicia el mundial de fútbol Brasil 2014.

El ejemplo se basa en 3 archivos: el archivo index.html donde haremos la maquetación, el archivo style.css donde diseñaremos las hojas de estilo y el archivo functions.js donde haremos la programación javascript. Al final nos debería quedar así:

Ahora si vamos a la codificación de los archivos:

INDEX.HTML

<!DOCTYE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="functions.js"></script>
</head>
<body onload="ConteoRegresivo()">
<div id="contenedor">
    <img src="talu.png">
    <h2>Faltan:</h2>
    <div id="contador"></div>
    <h4><i>¡Para que empiece el Mundial de Fútbol Brasil 2014!</i></h4>
    <div class="bottom">
        <hr>
        <p>Como hacer un conteo regresivo en HTML5, CSS3 y Javascript</p>
        <p>http://www.genesisvargasj.com</p>
    </div>
</div>
</body>
</html>

FUNCTIONS.JS

function ConteoRegresivo()
{
    var fecha=new Date('2014','5','12','15','00','00')
    var hoy=new Date()
    var dias=0
    var horas=0
    var minutos=0
    var segundos=0
    if (fecha>hoy)
    {
        var diferencia=(fecha.getTime()-hoy.getTime())/1000
        dias=Math.floor(diferencia/86400)
        diferencia=diferencia-(86400*dias)
        horas=Math.floor(diferencia/3600)
        diferencia=diferencia-(3600*horas)
        minutos=Math.floor(diferencia/60)
        diferencia=diferencia-(60*minutos)
        segundos=Math.floor(diferencia)
        document.getElementById('contador').innerHTML = '' + dias + ' : ' + horas + ' : ' + minutos + ' : ' + segundos + '

Días - Horas - Minutos - Segundos'; if (dias>0 || horas>0 || minutos>0 || segundos>0) { setTimeout("ConteoRegresivo()",1000) } } else { document.getElementById('contador').innerHTML = '0 Días
¡Comenzo el Mundial Brasil 2014!'; } }

En esta funcion (ConteoRegresivo()) javascript creamos una fecha programada con la funcion Date() que es la fecha tope que en este ejemplo vendría siendo la fecha inicial del mundial Brasil 2014, tambien creamos otra variable que le llamamos hoy con la función Date() pero sin nada para que tome la fecha actual; luego comparamos ambas fechas para ver si la fecha actual es menor que la fecha programada y dependiendo de la condición colocamos nuestro anuncio: si aun falta tiempo para cumplirse la fecha programada mostramos cuantos días, horas, minutos, horas y segundos quedan y para que el usuario vea que el tiempo se esta moviendo volvemos a repetir la funcion ConteoRegresivo() con la función setTimeout de javascript que vendría siendo como un timer a la que le colocamos la funcion ConteoRegresivo para que se repita y el tiempo en milisegundos que serían 1000 para que se repita cada segundo :p.

STYLE.CSS

body {
    background:#222;
    color:#fff;
    font-family: sans-serif;
    font-weight: 300;
    font-size: 16px;
}
#contenedor{
    text-align:center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 450px;
    height: 490px;
    margin-top: -245px;
    margin-left: -225px;
    overflow:hidden;
}
#contenedor img{
    margin:0 auto;
    max-height:150px;
}
.bottom{
    padding-top:20px;
}
.r3 {
    font-weight:bold;
    font-size:30px;
    color:red;
    background-color:#555;
    padding:10px;
    border:2px solid #111;
}
.y3 {
    font-weight:bold;
    font-size:30px;
    color:yellow;
    background-color:#555;
    padding:10px;
    border:2px solid #111;
}
.b3 {
    font-weight:bold;
    font-size:30px;
    color:blue;
    background-color:#555;
    padding:10px;
    border:2px solid #111;
} 

Bueno eso es todo espero que les sirva mucho para aprender y practicar. Les dejo una carpeta comprimida para que descarguen el ejemplo y también un demo para que lo vean en funcionamiento.

DEMO

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: