Hoe een "Aan komende tijd"-pagina te maken：

Hoe een "Aan komende tijd"-pagina te maken

Eerste stap - Voeg HTML toe:

In ons voorbeeld zullen we een achtergrondafbeelding gebruiken die het hele scherm bedekt en enkele tekst plaatsen in de afbeelding om de gebruiker te informeren wat er aan de hand is.

Deze voorbeeld toont hoe je een "Aan komende tijd"-pagina kunt maken met HTML en CSS. Raadpleeg de volgende voorbeeld om te leren hoe je een "aflopende klok"-timer kunt toevoegen met JavaScript.

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p id="demo">35 days</p>
  </div>
  <div class="bottomleft">
    <p>Some text</p>
  </div>
</div>

第二步 - 添加 CSS：

/* 将 body 和 html 的高度设置为 100%，以使背景图像覆盖整个页面：*/
body, html {
  height: 100%
}
.bgimg {
  /* 背景图 */
  background-image: url('/w3images/forestbridge.jpg');
  /* 全屏 */
  height: 100%;
  /* 居中背景图像 */
  background-position: center;
  /* 放大图像 */
  background-size: cover;
  /* 添加 position: relative 以启用图像内部的绝对定位元素（放置文本） */
  position: relative;
  /* 为 .bgimg 容器内的所有元素添加白色文本颜色 */
  color: white;
  /* 添加字体 */
  font-family: "Courier New", Courier, monospace;
  /* 将字体大小设置为 25 像素 */
  font-size: 25px;
}
/* 在左上角定位文本 */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* 在左下角定位文本 */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* 在中间定位文本 */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Stel de stijl van het <hr> element in */
hr {
  margin: auto;
  width: 40%;
}

Probeer het zelf

Derde stap - Voeg JavaScript toe:

Voeg JavaScript toe om een countdown-timer te maken:

// Stel in de datum waarvoor we aftellen
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Updateer de countdown elke 1 seconde
var x = setInterval(function() {
  // Haal de huidige datum en tijd op
  var now = new Date().getTime();
  // Bereken de afstand tussen de huidige tijd en de countdown-datum
  var distance = countDownDate - now;
  // Bereken de tijd voor dagen, uren, minuten en seconden
  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);
  // Toon het resultaat in het element met id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
  + minutes + "m " + seconds + "s ";
  // Als de countdown afloopt, schrijf enkele teksten.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

Probeer het zelf