Oxygenados La comunidad hispana
Menu

Recoda

Patrocinador
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.

Contador Regresivo

Copiar
Copiar
Ver todos los Templates

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌

Ayúdanos a que esta sección siga siendo gratuita

Esta sección, al igual que todo el contenido de esta página, se ofrece de manera gratuita.  
Esto supone una gran cantidad de trabajo, que ofrecemos de manera altruista, y un coste económico para el que pedimos una pequeña contribución para poder seguir dando este servicio a la comunidad de usuarios de OxygenBuilder.

0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios