Inicio Apuntes FPApuntes DAW Botón de descarga con cuenta regresiva, cómo crearlo con JavaScript

Botón de descarga con cuenta regresiva, cómo crearlo con JavaScript

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo que quizás pueda resultarle útil a algunos. Si tienes una web desde la que permites descargas, tendrás en ella algún botón para descargar aquello que ofreces. Bueno, pues hoy vamos a ver cómo se puede crear un botón de descarga con cuenta regresiva utilizando JavaScript.

Para crear este botón de descarga con cuenta regresiva, solo necesitaremos utilizar HTML, CSS y JavaScript. Como es lógico, en el código que veremos a continuación, todos los parámetros se podrán modificar para adaptarlos a nuestras necesidades. Por eso podremos cambiar el link de descarga, el tiempo de la cuenta regresiva, etc … Como decía, este botón para descargar archivos, se puede utilizar de forma más o menos sencilla en una web.

Crear un botón de descarga con cuenta regresiva utilizando JavaScript

botón de descarga con cuenta regresiva

Para empezar este proyecto, vamos a comenzar por crear una carpeta en la que vamos a incluir los archivos que formarán el ejemplo. Después, dentro meteremos un archivo HTML, otro CSS y otro JavaScript, como los que vamos a ver a continuación.

HTML

El archivo HTML necesario, con el que vamos a crear la estructura de nuestro botón, lo llamaremos index.html.

En el código HTML, dentro de la etiqueta button, encontraremos data-timer. Ahí será en donde le daremos un valor numérico, y que nos servirá para indicar desde donde empezará la cuenta regresiva. En este ejemplo esta cuenta comenzará en 9, pero esto se puede adaptar a lo que cada uno necesite. Además, aquí también se añade el link a Google Fonts para poder utilizar el icono que se añade en el botón.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Botón de descarga con tiempo</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Google Font para el icono de descarga -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>

<body>
  <div class="titulo">Botón de descarga</div>
  <button class="descarga-btn" data-timer="9"><!-- data-timer indica el tiempo que habrá que esperar para descargar -->
    <span class="icon material-symbols-rounded">vertical_align_bottom</span>
    <span class="text">Descargar Archivo</span>
  </button>
  <script src="script.js" defer></script>
</body>

</html>

CSS

Para darle estilo a nuestro botón, necesitamos crear un archivo llamado style.css. Aquí será donde añadiremos las reglas que darán el aspecto y los colores del botón, la cuenta regresiva, y todo lo demás que se va a ver en pantalla.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comic Sans MS', sans-serif;
}

body {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #400053;
}

/* Botón de descarga*/
.descarga-btn {
  text-align: center;
  height: 60px;
  outline: none;
  border: none;
  color: #fff;
  display: flex;
  cursor: pointer;
  padding: 16px 25px;
  margin: 80px auto;
  border-radius: 6px;
  align-items: center;
  white-space: nowrap;
  background: #00b7f8;
  border-bottom: 4px solid #0045a6;
  border-radius: 12px;
  transition: all 0.2s ease 0s;
}

.descarga-btn:hover {
  background: #0096f7;
}

.descarga-btn:active {
  box-shadow: 1px 1px 1px #777, 0px 0px 30px 0px #00b7f8;
  border-bottom: 1px solid #0045A6;
  text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff;
  transform: translateY(4px);
  transition: all 0.1s ease 0s;
  margin: 80px auto 76px auto;
}

.descarga-btn.timer {
  color: rgb(255, 255, 255);
  background: #00b7f8;
  transition: none;
  font-size: 1.6rem;
  pointer-events: none;
}

.descarga-btn .icon {
  font-size: 3rem;
}

.descarga-btn .text {
  font-size: 1.5rem;
  padding-left: 10px;
}

/*Color de los segundos en la cuenta regresiva*/
.descarga-btn.timer b {
  color: #000000;
  padding: 0 8px;
}

/* Título */
.titulo {
  margin-top: 5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.titulo:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}

JavaScript

Por último, para que se realice la cuenta regresiva necesitamos crear un archivo JavaScript, al cual llamaremos script.js. Aquí además de la cuenta atrás, añadiremos en la segunda línea la variable en la que incluiremos el link de descarga al archivo que queremos ofrecer. En este archivo, cuando se cumpla la cuenta atrás y descarguemos el archivo, nos dará la posibilidad de volver a descargar el archivo, pero sin necesidad de esperar otra vez a que se cumpla la cuenta regresiva.

const BtnDescarga = document.querySelector(".descarga-btn");
const linkDescarga = "https://www.mediafire.com/file/xctj1prawpf80qu/boton-descarga.zip/file";

const initTimer = () => {
    // Comprobación de si la cuenta se ha cumplido ya. De ser así se dirige al link de descarga
    if (BtnDescarga.classList.contains("disable-timer")) {
        BtnDescarga.innerHTML = `<span class="icon material-symbols-rounded">vertical_align_bottom</span>
                                    <span class="text">Volver a descargar</span>`;
        return (location.href = linkDescarga);
    }

    let timer = BtnDescarga.dataset.timer;
    BtnDescarga.classList.add("timer");
    BtnDescarga.innerHTML = `Tu descarga comenzará en <b>${timer}</b> segundo/s`;

    const initCounter = setInterval(() => {
        // Cuenta regresiva
        if (timer > 0) {
            timer--;
            return (BtnDescarga.innerHTML = `Tu descarga comenzará en <b>${timer}</b> segundo/s`);
        }
    
    clearInterval(initCounter);
    location.href = linkDescarga; // Descarga del archivo 
    BtnDescarga.innerText = "Tu archivo se está descargando ...";
    
    // Volver a descargar
    setTimeout(() => {
        BtnDescarga.classList.replace("timer", "disable-timer");
        BtnDescarga.innerHTML = `<span class="icon material-symbols-rounded">vertical_align_bottom</span>
                                    <span class="text">Descargar otra vez</span>`;
        }, 3000);
    }, 1000);
};

BtnDescarga.addEventListener("click", initTimer);

Si quieres ver funcionando este botón, antes de crear este proyecto en tu equipo, solo tienes que seguir el siguiente enlace a la sección de ejemplos de esta web. Para este ejemplo, el link de descarga que he puesto, lleva a Mediafire, a descargar el código fuente de este ejemplo. Y bueno, con esto todo el que quiera puede añadir un botón de descarga con cuenta regresiva a su web.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.