如何创建：“即将上线”页面

如何创建“即将上线”页面

第一步 - 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>

第二步 - 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%;
}

직접 시도해 보세요

第三步 - 添加 JavaScript：

添加 JavaScript 以创建倒计时器：

// 设置我们正在倒计时的日期
var countDownDate = new Date(\
// 每 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=\
  document.getElementById("demo").innerHTML = days + \
  + minutes + \
  // 如果倒计时结束，写一些文本。
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = \
  }

직접 시도해 보세요