Bagaimana Membuat："即将上线" Halaman

Bagaimana Membuat Halaman "即将上线"

Pertama - Tambahkan HTML：

Dalam contoh kami, kita akan menggunakan gambar latar belakang yang menutupi seluruh halaman dan menempatkan beberapa teks di dalam gambar untuk memberitahu pengguna tentang apa yang sedang terjadi.

Contoh ini menunjukkan bagaimana membuat halaman "即将上线" menggunakan HTML dan CSS. Silakan lihat contoh berikutnya untuk mengetahui bagaimana menambahkan "jam hitung mundur" dengan 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>

Ketiga - 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%;
}

Coba sendiri

Tahap ketiga - Tambahkan JavaScript:

Tambahkan JavaScript untuk membuat penghitung waktu:

// Menetapkan tanggal yang kita hitung mundur
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update hitungan waktu setiap 1 detik
var x = setInterval(function() {
  // Mendapatkan tanggal dan waktu hari ini
  var now = new Date().getTime();
  // Menghitung jarak antara tanggal sekarang dan tanggal penghitungan waktu
  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 waktu habis, tulis beberapa teks.
  if (jarak < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "KADALUWARA";
  }
}, 1000);

Coba sendiri