Contador Regresivo - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
Calculando el tiempo para llegar al 25 de Diciembre del 2022.
Y faltan

Mostramos como crear un contador regresivo personbalizable para oxygen con unas pocas líneas de JavaScript. Solo tienes que copiar el código y pegarlo, luego ya solo tendrás que configurar la apariencia a tu gusto y necesidad.
Los pasos a seguir son estos:
  1. Copia el código que mostramos abajo.
//**   Cambiar la fecha y la hora para la deseada teniendo en cuenta que el 
//***  formato mostrado y que las tres primeras letras son  del mes en inglés.
var miFecha = "Sept 16, 2021 00:34:00"
//***    Indicar si se quiere cambiar el color del fondo al llegar el tiempo a cero: true -> afirmativo false -> negativo
var cambiaFondo = true;
//***   Indicar el color del fondo si se ha seleccionado en true el cambiar el color del fondo.
var colorFondo = "#ff0000";
//**  Mensaje de Finalizado  -> true si se desea indicar un mensaje al finalizar la cuenta  -> false si es lo contrario */
var ponerMensajeFinal = true;
//**  Indicar el mensaje de finalizado */
var mensajeFinal = "Se ha terminado el tiempo";


//**************   *************=================
/******************************
NO CAMBIAR NADA DE AQUÍ PARA ABAJO
********************************/
//**************   ===============================

var FechayHora = new Date(miFecha).getTime();
var cuenta = setInterval(function () {

    var ahora = new Date().getTime();
    var quedan = FechayHora - ahora;
    var dias = "";
    var horas = Math.floor((quedan % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutos = Math.floor((quedan % (1000 * 60 * 60)) / (1000 * 60));
    var segundos = Math.floor((quedan % (1000 * 60)) / 1000);

    dias = (Math.floor(quedan / (1000 * 60 * 60 * 24)) > 1) ? Math.floor(quedan / (1000 * 60 * 60 * 24)) + "d " : "";
    (horas < 10) ? horas = "0" + horas : horas;
    (minutos < 10) ? minutos = "0" + minutos : minutos;
    (segundos < 10) ? segundos = "0" + segundos : segundos;


    if (quedan < 0) {
        clearInterval(cuenta);
        if (ponerMensajeFinal) {
            document.getElementsByClassName("contador-principal")[0].innerHTML = mensajeFinal;
        }
        if (cambiaFondo) {
            document.getElementsByClassName("contador-principal")[0].style.backgroundColor = colorfondo;
        }
    } else {
        document.getElementsByClassName("contador-principal")[0].innerHTML = dias + horas + "h : "
            + minutos + "m : " + segundos + "s ";
    }
}, 1000);
Click para Copiar
Copiado
  1. Se añade un bloque de texto, como tú quieras , desees o necesites: dentro de un div o no; en las opciones Avanzadas de ese texto, en el panel de herramientas de la derecha seleccionas del panel de JS y dentro pegas el código copiado en el paso 1.
  2. A ese bloque de texto, tienes que añadirle la clase con el nombre : "contador-principal", mostramos abajo tal como se vería en un editor normal y como se vería en el editor Recoda
contador Regresivo Clase
contador Regresivo Clase 1

  1. Las opciones de configuración se realizan editando el código JS que anteriormente hemos copiado y pegado en los pasos 1 y 2 , y son las siguientes:
    • miFecha --> En este ejemplo tenemos "Sept 06, 2021 00:34:00", pues lo que está dentro de las comillas se reemplazará por los valores que queramos, teniendo en cuenta que las tres primeras letras corresponden al nombre del mes y que están en idioma inglés.
    • cambiaFondo --> Esto lo pondremos en true para que, una vez finalizada la cuenta regresiva el color del fondo del contador pase a otro color, en caso de que no queramos que esto suceda pondremos false,.
    • colorFondo --> Aqui se pondrá el color del fondo en formato hexadecima ("#xxxxxx"), si se pone en false el punto anterior este valor carece de importancia.
    • ponerMensajeFinal --> Pondremos true si queremos que la información del contrador sea reemplazada por un mensaje una vez haya transcurrido el tiempo y el contador haya llegado a cero. Si no queremos que esto suceda ponemos en false, con lo que una vez transcurrido el tiempo lo que se mostrará será el contador con todos los número en cero.
    • mensajeFinal --> Aquí pondremos el mensaje que queremos enviar en caso de poner en true el punto anterior.


      Y listo, ya tenemos nuestro contador regresivo que es totalemente configurable, podemos darle al contador cualquier modificación estética que queramos de la misma manera que se le puede dar a otro texto cualquiera, meterlo dentro de un div y cambiarle el color del fonde, cambiar la tipografía, el color , .... etc, la única condición que hay que respetar es la de poner a este texto una clase que se llame contador-principal.