「即将上线」ページを作成する方法

「即将上线」ページを作成する方法

ステップ1 - HTMLを追加：

この例では、ページ全体を覆う背景画像を使用し、画像内にテキストを配置して、ユーザーに何が行われているかを知らせるようにします。

この例では、HTMLとCSSを使用して「即座に利用可能」ページを作成する方法を示します。次の例を確認して、JavaScriptを使用して「カウントダウンタイマー」を追加する方法を学びます。

<div class="bgimg">
  <div class="topleft">
    <p>ロゴ</p>
  </div>
  <div class="middle">
    <h1>ientôt disponible</h1>
    <hr>
    <p id="demo">35 days</p>
  </div>
  <div class="bottomleft">
    <p>テキスト</p>
  </div>
</div>

ステップ2 - 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 {
  konum: mutlak;
  top: 0;
  left: 16px;
}
/* 左下角にテキストを定位 */
.bottomleft {
  konum: mutlak;
  bottom: 0;
  left: 16px;
}
/* 中間にテキストを定位 */
.orta {}}
  konum: mutlak;
  üst: 50%;
  sol: 50%;
  transform: translate(-50%, -50%);
  text-align: ortasal;
}
/* <hr> elementinin tarzını ayarlayın */
hr {
  marjin: otomatik;
  genişlik: 40%;
}

Kişisel olarak deneyin

Üçüncü adım - JavaScript ekle:

JavaScript ile geri sayım makinesi oluşturmak için ekle:

// Geri sayım için kullanılacak tarih belirleyin
var countDownDate = new Date("Oca 5, 2024 15:37:25").getTime();
// Her 1 saniyede bir geri sayımı güncelleyin
var x = setInterval(function() {
  // Bugünkü tarih ve saati alın
  var şimdi = new Date().getTime();
  // Şimdi ve geri sayım tarihleri arasındaki mesafeyi hesaplayın
  var mesafe = countDownDate - şimdi;
  // Gün, saat, dakika ve saniye hesaplayan zaman hesaplaması
  var günler = Math.floor(mesafe / (1000 * 60 * 60 * 24));
  var saatler = Math.floor((mesafe % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var dakika = Math.floor((mesafe % (1000 * 60 * 60)) / (1000 * 60));
  var saniye = Math.floor((mesafe % (1000 * 60)) / 1000);
  // id="demo" olan elemanda sonuçları gösterin
  document.getElementById("demo").innerHTML = günler + "g " + saatler + "s ";
  + dakika + "m " + saniye + "s ";
  // Eğer geri sayım biterse, bazı metinler yazın.
  if (mesafe < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "SONUNUN SÜRESİ DOLMUŞTU";
  }

Kişisel olarak deneyin