Bagaimana untuk membuat: halaman 'Akan Datang'

Bagaimana untuk membuat halaman 'Akan Datang'

Langkah Pertama - Tambahkan HTML:

Dalam contoh kami, kita akan menggunakan imej latar belakang yang menutupi seluruh halaman dan menempatkan beberapa teks di dalam imej, supaya pengguna tahu apa yang berlaku.

Contoh ini memaparkan bagaimana untuk menggunakan HTML dan CSS untuk membuat halaman 'Akan Datang'.. Sila lihat contoh berikut untuk mengerti bagaimana untuk menambahkan 'Pemantau Waktu Bercountdown' menggunakan 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>

Keselamatan - Tambahkan 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 {
  posisi: tetap;
  top: 0;
  left: 16px;
}
/* 在左下角定位文本 */
.bottomleft {
  posisi: tetap;
  bottom: 0;
  left: 16px;
}
/* 在中间定位文本 */
.middle {}}
  posisi: tetap;
  atas: 50%;
  kiri: 50%;
  transform: translate(-50%, -50%);
  text-align: tengah;
}
/* Atur gaya elemen <hr> */
hr {
  marjin: auto;
  lebar: 40%;
}

Cuba sendiri

Tahap ketiga - Tambahkan JavaScript:

Tambahkan JavaScript untuk membuat penghitung waktu mundur:

// Tetapkan tanggal yang sedang dihitung countdown
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update countdown setiap 1 detik
var x = setInterval(function() {
  // Dapatkan tanggal dan waktu hari ini
  var now = new Date().getTime();
  // Menghitung jarak antara tanggal sekarang dan tanggal countdown
  var jarak = countDownDate - now;
  // Menghitung hitungan waktu untuk hari, jam, menit dan detik
  var hari = Math.floor(jarak / (1000 * 60 * 60 * 24));
  var jam = Math.floor((jarak % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var menit = Math.floor((jarak % (1000 * 60 * 60)) / (1000 * 60));
  var detik = Math.floor((jarak % (1000 * 60)) / 1000);
  // Tampilkan hasil di elemen dengan id="demo"
  document.getElementById("demo").innerHTML = hari + "d " + jam + "h "
  + menit + "m " + detik + "s ";
  // Jika penghitungan countdown selesai, tulis beberapa teks.
  if (jarak < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "LUPUSAK";
  }

Cuba sendiri