script Banner 300x250
script HTML
script HTML crea una ventana emergente que se muestra una sola vez por visitante cuando la página se carga, y se oculta automáticamente después de una cuenta regresiva de 12 segundos. Aquí te dejo una descripción detallada de cómo funciona:
Estructura del documento HTML:
Declara el documento como HTML5 y establece el idioma de la página a español.
2. <head>
Contiene meta información y enlaces a hojas de estilo.
3. <meta charset="UTF-8">
Establece la codificación de caracteres a UTF-8.
4. <title>Ventana emergente</title>
Define el título de la página.
5. <link rel="stylesheet" type="text/css" href="styles.css">
Enlaza a una hoja de estilos CSS externa llamada styles.css.
6. <style>
Define estilos CSS internos específicos para esta página.
Estilos CSS
1. #overlay
Un fondo semi-transparente que cubre toda la pantalla.
Inicialmente oculto (display: none).
Posición fija, cubriendo toda la ventana del navegador.
Efecto de difuminado (backdrop-filter: blur(2px)).
2. #popup
Cuadro emergente centrado en la pantalla.
Inicialmente oculto (display: none).
Posición fija y centrada.
Estilo visual con fondo blanco, borde y sombra.
3. #countdown
Estilo del texto para la cuenta regresiva dentro del cuadro emergente.
Cuerpo del documento HTML (<body>)
1. <div id="overlay"></div>
Div que actúa como fondo semi-transparente.
2. <div id="popup">
Div que contiene el contenido del cuadro emergente.
3. Contenido del #popup
Título "¡PREPARANDO TU DESCARGA!".
Mensaje "Por favor, espera un momento...".
Elemento #countdown que muestra la cuenta regresiva de 12 segundos.
JavaScript
1. window.addEventListener('DOMContentLoaded', function() { ... });
Añade un evento que se ejecuta cuando el DOM se ha cargado completamente.
2. localStorage.getItem('popupMostrado')
Comprueba si la ventana emergente ya ha sido mostrada anteriormente utilizando localStorage.
3. Mostrar el #overlay y el #popup
Si la ventana emergente no se ha mostrado antes, establece overlay.style.display = 'block' y popup.style.display = 'block' para mostrar los elementos.
4. Cuenta regresiva
Inicializa la variable timeLeft a 12.
Utiliza setInterval para disminuir timeLeft cada segundo y actualizar el contenido de #countdown.
Cuando timeLeft llega a 0, oculta #overlay y #popup.
5. Almacenar estado en localStorage
Después de mostrar la ventana emergente, establece localStorage.setItem('popupMostrado', 'true') para asegurarse de que no se vuelva a mostrar en futuras visitas.
