JavaScript 카운트다운 타이머가 포함된 출시 예정 페이지 만들기

15126 단어 tutorialwebdevjavascript
이 튜토리얼에서는 JavaScript 카운트다운 타이머를 사용하여 곧 출시될 랜딩 페이지를 개발하는 방법을 배우게 됩니다. 이 페이지는 큰 이벤트, 웹사이트 출시 또는 제품 출시까지 남은 시간을 표시하는 데 사용할 수 있습니다.



다음 마크업을 사용하여 새 HTML 파일을 만들어 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="countdown">
      <h1>Coming Soon!</h1>
      <p>Consectetur quo enim sequi. Repellendus sint deserunt et. Qui delectus repellat a illo adipisci sed. Aut quod alias atque sunt dolorem aliquam reprehenderit et.</p>      
      <ul>
        <li><span id="days"></span>Days</li>
        <li><span id="hours"></span>Hours</li>
        <li><span id="minutes"></span>Minutes</li>
        <li><span id="seconds"></span>Seconds</li>
      </ul>      
    </div>
    <script src="script.js"></script>
  </body>
</html>


다음으로 script.js 파일을 만들고 각 시간 단위에 대한 변수를 정의하여 시작합니다.

(() => {
  const sec = 1000,
    min = sec * 60,
    hour = min * 60,
    day = hour * 24;  
})();


카운트다운 타이머를 구축할 때 다음 형식을 사용하여 종료 날짜/시간을 지정해야 합니다.

const end = new Date("Jul 01, 2021 12:00:00").getTime();


남은 시간을 계산하기 위해 setInterval를 사용하여 1000밀리초마다 현재 시간을 가져옵니다. 그런 다음 종료 날짜에서 시간을 빼서 남은 시간을 계산하고 HTML 텍스트를 업데이트할 수 있습니다.

const int = setInterval(() => {
  const current = new Date().getTime();
  const remaining = end - current;
  document.getElementById("days").innerText = Math.floor(remaining / day);
  document.getElementById("hours").innerText = Math.floor( (remaining % day) / hour );
  document.getElementById("minutes").innerText = Math.floor( (remaining % hour) / min );
  document.getElementById("seconds").innerText = Math.floor( (remaining % min) / sec );   
}, 1000);


현재 카운트다운이 만료되면 종료 날짜 이후 경과된 시간을 표시하는 타이머가 계속 실행됩니다. 대신 모든 숫자를 0으로 설정하고 종료 날짜에 도달했음을 나타내도록 텍스트를 업데이트합니다. 이렇게 하려면 setInterval 메서드 끝에 다음을 추가합니다.

if (remaining < 0) {
  document.querySelector("h1").innerText = "We Have Arrived!";
  document.querySelector("p").innerHTML = "The big day is finally here - view our <a href=https://www.website.com>website<a/> for more information.";
  const digit = document.querySelectorAll("span");
  digit.forEach((digit) => {
    digit.innerText = "0";
  });
  clearInterval(int);
}


이제 CSS에 대한 카운트다운이 기능적으로 완료됩니다.

따라서 카운트다운은 수평 및 수직으로 중앙 정렬됩니다. 몸체는 정렬 중앙에 display: flex로 설정되었습니다. 배경 이미지는 Pexels에서 제공되었으며 CSScover 속성을 사용하여 전체 화면을 표시하도록 설정되었습니다.

html {
  height: 100%;
  overflow: hidden;
}
body {
  background: url("https://images.pexels.com/photos/1252869/pexels-photo-1252869.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat center center fixed;
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


타이포그래피의 경우 text-shadow를 추가하여 배경 이미지에 오버레이될 때 읽기 쉽도록 하고 글꼴 크기를 늘리고 기본 파란색 링크 색상을 재정의합니다.

h1 {
  font-size: 4rem;
  text-shadow: 1px 1px 5px #000;  
  margin: 0;
}
p {
  font-size: 1.2rem;  
  text-shadow: 1px 1px 2px #000;
}
a {
  color: #fff;
}


마지막으로 카운트다운 타이머의 숫자와 텍스트입니다. 4개의 요소가 있으므로 flex: 25%를 사용하여 가로 축에 균등하게 분배합니다. 숫자가 눈에 띄도록 배경색을 추가합니다(배경 이미지에서 가져옴).

#countdown {
  max-width: 600px;
}
#countdown ul {
  margin: 5% 0 0 0;
  padding: 0;
  display: flex;
  gap: 5%;
}
#countdown ul li {
  flex: 25%;
  padding: 5%;
  margin: 0;
  list-style: none;
  background: #001f2f;
  border-radius: 5px;
}
#countdown ul li span {
  display: block;
  font-size: 3rem;
}


Original Article
nginx 소스 코드 분석 - 대기 열 구조 ngxqueue_t
Nginx 도 난 방지 체인 (3)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage