countdown.zip
0.00MB

이번에는 특정날짜를 표시한후 그 날짜까지의 남은 시간을 나타내는 예제

 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <section id="countDownWrap">
        <h1>Countdown</h1>
        <div class="countdown-ul">
            <h1 class="text-center"></h1>
          <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>
      </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>
</html>

 

css

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

body {
    display: flex;
    font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
    background-color: #f16529;
    background-image: linear-gradient(142deg, #f1a829, #f18629 31%, #f16529 65%, #f14429);
    background-size: 100% 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
}

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

p {
    font-size: 3rem;
    color: #fff;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
    font-size: 3rem;
    color: #fff;
    display: inline-block;
    padding:0 15px; 
    width: 300px;
}

li span {
    display: block;
}

 

마지막으로 js

window.onload = function() {
  const distanceDay = "Jan 1, 2021 00:00:00 GMT+0900";
  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;
  const dayWrap = document.querySelector("#days");
  const hourWrap = document.querySelector("#hours");
  const minuteWrap = document.querySelector("#minutes");
  const secondsWrap = document.querySelector("#seconds");  
  let countDown = new Date(distanceDay).getTime();
  let now = new Date().getTime();
  let distance = countDown - now;
  dayWrap.innerText = Math.floor(distance / (day)),
  hourWrap.innerText = Math.floor((distance % (day)) / (hour)),
  minuteWrap.innerText = Math.floor((distance % (hour)) / (minute)),
  secondsWrap.innerText = Math.floor((distance % (minute)) / second);                    

  function countdown() {
      count = setInterval(function() {
        countDown = new Date(distanceDay).getTime();
        now = new Date().getTime();
        distance = countDown - now;        
        dayWrap.innerText = Math.floor(distance / (day)),
        hourWrap.innerText = Math.floor((distance % (day)) / (hour)),
        minuteWrap.innerText = Math.floor((distance % (hour)) / (minute)),
        secondsWrap.innerText = Math.floor((distance % (minute)) / second);          
        if (distance === 0) {
          clearInterval(count);
        }
      }, 1000);
  };

  countdown();
}

 

소스상 특별한것은 없지만 다음에 짤때는 조금더 깔끔하게 짤수있을거같다 ...

'JavaScript > Vanilla JS' 카테고리의 다른 글

replace  (0) 2020.12.08
String.fromCharCode  (0) 2020.11.26
js 스톱워치 만들기  (0) 2020.10.19
js 간단한 시계 만들기  (0) 2020.07.16
js es6 연습용 시계 만들기  (0) 2020.06.24

티스토리툴바