Cách tạo: Trang "Sắp ra mắt"

Cách tạo trang "Sắp ra mắt"

Bước 1 - Thêm HTML:

Trong ví dụ của chúng tôi, chúng ta sẽ sử dụng ảnh nền chiếm toàn bộ trang và đặt một số văn bản trong ảnh để người dùng biết điều gì đang diễn ra.

Ví dụ này minh họa cách sử dụng HTML và CSS để tạo trang "Sắp ra mắt". Vui lòng xem ví dụ tiếp theo để hiểu cách sử dụng JavaScript để thêm "đếm ngược thời gian".

<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>

Bước 2 - Thêm 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;
}
/* Đặt样式 cho phần tử <hr> */
hr {
  margin: auto;
  width: 40%;
}

Thử nghiệm ngay

Bước 3 - Thêm JavaScript:

Thêm JavaScript để tạo bộ đếm ngược:

// Đặt ngày mà chúng ta đang đếm ngược
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Cập nhật đếm ngược mỗi giây
var x = setInterval(function() {
  // Lấy ngày và giờ hiện tại
  var now = new Date().getTime();
  // Tính khoảng cách giữa thời điểm hiện tại và ngày đếm ngược
  var distance = countDownDate - now;
  // Tính toán thời gian ngày, giờ, phút và giây
  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);
  // Hiển thị kết quả trong phần tử có id="demo"
  document.getElementById("demo").innerHTML = days + "ngày " + hours + "giờ "
  + minutes + "phút " + seconds + "giây ";
  // Nếu đếm ngược kết thúc, viết một đoạn văn bản.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "HỎNG";
  }

Thử nghiệm ngay