วิธีการสร้าง：“จะเข้าข้างหน้า”

วิธีการสร้างหน้า "จะเข้าข้างหน้า"

ขั้นที่ 1 - ใส่ HTML:

ในตัวอย่างของเรา เราจะใช้ภาพ背影ที่คลุมทั้งหน้าเว็บและใส่ข้อความบนภาพเพื่อให้ผู้ใช้รู้ว่ามีอะไรเกิดขึ้น

ตัวอย่างนี้แสดงว่าวิธีการใช้ HTML และ CSS ในการสร้างหน้า "จะเข้าข้างหน้า" โปรดดูตัวอย่างต่อไปเพื่อดูวิธีการใช้ 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>

ขั้นที่ 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 {
  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;
}
/* ตั้งรูปแบบสำหรับองค์ประกอบ <hr> */
hr {
  margin: auto;
  width: 40%;
}

亲自试一试

ขั้นที่ 3 - เพิ่ม JavaScript：

เพิ่ม JavaScript ในการสร้างตัวนับความหลัง：

// ตั้งวันที่ที่เรากำลังนับความหลัง
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// ปรับปรุงนับความหลังทุก 1 วินาที
var x = setInterval(function() {
  // รับวันที่และเวลาของวันนี้
  var now = new Date().getTime();
  // คำนวณระยะทางระหว่างตอนนี้และวันที่นับความหลัง
  var distance = countDownDate - now;
  // คำนวณวันที่ ชั่วโมง นาที และวินาทีของการนับความหลัง
  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);
  // แสดงผลในองค์ประกอบ id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
  + minutes + "m " + seconds + "s ";
  // ถ้าการนับความหลังเสร็จลง ข้อความบางอย่าง
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "หมดคราว";
  }

亲自试一试