카운트다운 만들기

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>COUNTDOWN TIMER</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Count Down</h1>

    <div class="filter"></div>

    <div class="countdown-container">
      <div class="countdown-el day-c">
        <p class="big-text" id="days">0</p>
        <span>days</span>
      </div>
      <div class="countdown-el hours-c">
        <p class="big-text" id="hours">0</p>
        <span>hours</span>
      </div>
      <div class="countdown-el mins-c">
        <p class="big-text" id="mins">0</p>
        <span>mins</span>
      </div>
      <div class="countdown-el seconds-c">
        <p class="big-text" id="seconds">0</p>
        <span>seconds</span>
      </div>
    </div>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url("./img/photo-1545251142-f32339076e6d.jpeg");
    background-size: cover;
    background-position: center center;
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

h1 {
    font-size: 4rem;
    color: #fff;
    margin-top: -10rem;
    margin-bottom: 5rem;
}

.countdown-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 1;
}

.countdown-el {
    text-align: center;
}

.big-text {
    font-size: 6rem;
    line-height: 1;
    margin: 1rem 2rem;
}

.end-msg {
    font-size: 3rem;
    line-height: 1;
    margin: 1rem 2rem;
}

.filter {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/*
 현재 날짜(요일 포함) 및 시간 구하는 함수

document.addEventListener("DOMContentLoaded", function () {
  let date = new Date();
  let years = date.getFullYear();
  let days = date.getDay();
  let hours = date.getHours();
  let mins = date.getMinutes();
  let seconds = date.getSeconds();

  let week = new Array();
  week[0] = "SUN";
  week[1] = "MON";
  week[2] = "THU";
  week[3] = "WED";
  week[4] = "TUR";
  week[5] = "FRI";
  week[6] = "SAT";

  document.getElementById("days").innerText = week[days];
  document.getElementById("hours").innerText = hours;
  document.getElementById("mins").innerText = mins;
  document.getElementById("seconds").innerText = seconds;
});
*/

/*
카운트다운 
*/
// D-Day 지정
const newYears = "19 Sep 2020 01:08:00";

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");

function countdown() {
  const newYearsDate = new Date(newYears);
  const currentDate = new Date();

  const totalSeconds = (newYearsDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds % 60);

  if (newYearsDate > currentDate) {
    // console.log(days, hours, minutes, seconds);
    daysEl.innerHTML = formatTime(days);
    hoursEl.innerHTML = formatTime(hours);
    minsEl.innerHTML = formatTime(minutes);
    secondsEl.innerHTML = formatTime(seconds);
  } else {
    // 현재 날짜가 D-Day보다 크면 초기화
    daysEl.innerHTML = "00";
    hoursEl.innerHTML = "00";
    minsEl.innerHTML = "00";
    secondsEl.innerHTML = "00";
    document.querySelector(".countdown-container").innerHTML =
      '<p class="end-msg">이벤트가 끝났습니다.</p>';
  }
}

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

// initial call
countdown();

setInterval(countdown, 1000);

LIST

경험을 기록으로

카운트다운 만들기

댓글

티스토리툴바