Tabla de contenido
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
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.