Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Contador Regresivo

¿Cómo puedes hacerlo?

Calculando el tiempo para llegar al 25 de Diciembre del 2021.
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.
0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios

OTROS TIPS

Burbuja que sigue al cursor

Un efecto de seguimiento del cursor con solo código.

Leer más
Botón para copiar

Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

Leer más
Año Copyright dinámico

Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

Leer más
LISTADO TIPS