Contador de descarga para botón de descarga

Digitalplus · 8 Abr 2023

Hola a todos este es el mismo código que el anterior pero en este caso le he cambiado la animación de carga para que se mire mejor, espero que sea de su agrado.

Demostración de la mejora

HTML:

<button data-link="Tu-Link-Aqui" id="download-button" target="_blank">Descargar</button>
<div id="timer"></div>
<div class="loader"></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;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
  display: none;
}


@media screen and (max-width: 768px) {
  #download-button {
    font-size: 16px;
  }
  #timer {
    font-size: 18px;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript:

 const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loader = document.querySelector('.loader');

downloadBtn.addEventListener('click', function() {
  downloadBtn.style.display = 'none';
  timer.style.display = 'block';
  loader.style.display = 'block';
 
  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';
        loader.style.display = 'none';
      } 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';
        loader.style.display = 'none';
      }
    }
  }, 1000);
});

Importante: Otra vez el aviso del código anterior. El código puede que no se abra en una ventana emergente pero se activa un aviso del enlace

Espero que sea de su agrado 😁

dick · 8 Abr 2023

hola me podras colaborar necesito algo que me funcione de la siguiente forma que cuando alguien le de copiar a un texto despues que ya lo copie desaparezca o no lo puedan volver a copiar

AZK1 · 8 Abr 2023

no sirve pq lo bloquea el navegador al ser pop, hazlo temporizador + desbloquear boton manual de descarga

dick · 8 Abr 2023

osea asi como me dices podra desaparecer el texto

Digitalplus · 8 Abr 2023

dick dijo:
hola me podras colaborar necesito algo que me funcione de la siguiente forma que cuando alguien le de copiar a un texto despues que ya lo copie desaparezca o no lo puedan volver a copiar

Hola 👋 el texto es para una web porque lamentablemente no creo poder ayudarte porque no es posible impedir que alguien copie un texto a su portapapeles

Sin embargo, hay algunas técnicas que pueden dificultar la copia de texto, como por ejemplo:

1 Deshabilitar la selección de texto en la página web utilizando CSS:

CSS:

body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

2 Mostrar una advertencia al intentar copiar el texto utilizando JavaScript:

JavaScript:

document.addEventListener("copy", function(e) {
  e.preventDefault();
  alert("No se permite copiar este texto.");
});

bueno estas técnicas no son 100% efectivas, además pueden afectar negativamente la accesibilidad de la página web para usuarios. Por lo tanto, debes considerar cuidadosamente si deseas utilizar estas técnicas en tu página web

Digitalplus · 8 Abr 2023

AZK1 dijo:
no sirve pq lo bloquea el navegador al ser pop, hazlo temporizador + desbloquear boton manual de descarga

😁 Creo que tienes razón intentaré arreglarlo próximamente

Contador de descarga para botón de descarga

Digitalplus

dick

AZK1

dick

Digitalplus

Digitalplus

Temas similares