Cómo crear: página "Próximamente"

Cómo crear una página "Próximamente"

Primer paso - Añadir HTML：

En nuestro ejemplo, usaremos una imagen de fondo que cubre toda la página y colocaremos algunos textos dentro de la imagen para que el usuario sepa lo que está sucediendo.

Este ejemplo muestra cómo usar HTML y CSS para crear una página "Próximamente". Por favor, consulte el siguiente ejemplo para aprender cómo agregar un temporizador de cuenta regresiva usando JavaScript.

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>PRÓXIMAMENTE</h1>
    <hr>
    <p id="demo">35 días</p>
  </div>
  <div class="bottomleft">
    <p>Alguno de texto</p>
  </div>
</div>

Segundo paso - Añadir CSS：

/* Establecer la altura de body y html en 100% para que la imagen de fondo cubra toda la página: */
body, html {
  height: 100%
}
.bgimg {
  /* Imagen de fondo */
  background-image: url('/w3images/forestbridge.jpg');
  /* Pantalla completa */
  height: 100%;
  /* Centrar la imagen de fondo */
  background-position: center;
  /* Ampliar la imagen */
  background-size: cover;
  /* Añadir position: relative para habilitar elementos de posicionamiento absoluto dentro de la imagen (ubicar texto) */
  position: relative;
  /* Añadir color de texto blanco a todos los elementos dentro del contenedor .bgimg */
  color: white;
  /* Añadir fuente */
  font-family: "Courier New", Courier, monospace;
  /* Establecer el tamaño de la fuente en 25 píxeles */
  font-size: 25px;
}
/* Ubicación de texto en la esquina superior izquierda */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* Ubicación de texto en la esquina inferior izquierda */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* Ubicación de texto en el medio */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Establece el estilo del elemento <hr> */
hr {
  margin: auto;
  width: 40%;
}

Prueba por su cuenta

Paso 3 - Añade JavaScript:

Añade JavaScript para crear un temporizador:

// Establece la fecha para la que estamos contando hacia atrás
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Actualiza el temporizador cada 1 segundo
var x = setInterval(function() {
  // Obtiene la fecha y la hora de hoy
  var now = new Date().getTime();
  // Calcula la distancia entre la fecha actual y la fecha del temporizador
  var distance = countDownDate - now;
  // Calcula el número de días, horas, minutos y segundos del cálculo de tiempo
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Muestra los resultados en el elemento con id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  // Si el temporizador se ha acabado, escribe algunos textos.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }

Prueba por su cuenta