Digitalplus
VIP
Eta
Diseñador
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario popular!
Suscripción a IA
Hola a todos el día de hoy les traigo un botón de descarga con temporizador de segundos para sus enlaces de sus páginas, este código cuenta con un temporizador de 20 segundos que pueden personalizar a su gusto el código es responsive está hecho de html, css y javascript, espero que sea de su agrado.
Importante: El código puede que no se abra en una ventana emergente pero se activa un aviso del enlace
Demo
HTML:
<button id="download-button" data-link="https://www.Tu-Link-Aqui.com/download" target="_blank">Descargar</button>
<div id="timer"></div>
<div id="loading"></div>
CSS:
#download-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 18px;
cursor: pointer;
}
#timer {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
#loading {
width: 0%;
height: 5px;
background-color: #007bff;
transition: width 0.2s ease-out;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
#download-button {
font-size: 16px;
}
#timer {
font-size: 18px;
}
}
JavaScript:
const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loading = document.getElementById('loading');
downloadBtn.addEventListener('click', function() {
downloadBtn.style.display = 'none';
timer.style.display = 'block';
loading.style.width = '100%';
let timeLeft = 20;
let downloadLink = downloadBtn.getAttribute('data-link');
let countdown = setInterval(function() {
timeLeft--;
timer.innerText = `La descarga comenzará en ${timeLeft} segundos...`;
if (timeLeft == 0) {
clearInterval(countdown);
// Abrir la ventana emergente
const newWindow = window.open(downloadLink, '_blank', 'height=500,width=500');
// Verificar si se abrió la ventana
if (newWindow !== null && typeof newWindow !== 'undefined') {
// Restaurar el botón de descarga y ocultar la animación de carga
downloadBtn.style.display = 'block';
timer.style.display = 'none';
loading.style.width = '0%';
} else {
// Mostrar un mensaje de error
alert('El navegador ha bloqueado la ventana emergente. Por favor, habilite las ventanas emergentes para este sitio web.');
// Restaurar el botón de descarga y ocultar la animación de carga
downloadBtn.style.display = 'block';
timer.style.display = 'none';
loading.style.width = '0%';
}
}
}, 1000);
});Importante: El código puede que no se abra en una ventana emergente pero se activa un aviso del enlace
Demo
Última edición: