[JS] 크리스마스 카운트다운

실행결과 미리보기

---

 

Today's

목표

1. 실시간으로 날짜, 시간 반영하기

2. 현재 시간, 남은 D-day 표기하기

추가 목표

1. background에 눈내리는 애니메이션 추가

2. 크리스마스는 올해 크리스마스를 기준으로 년도 자동으로 받아오기

 

---

 

코드리뷰

01. Main

html xml

<div class="container">
  <h1>Until Christmas</h1>
  <div class="clock">
    <div class="clock-now">
      <p class="clock-text">Current time</p>
      <p id="now-time"></p>
    </div>
 
    <div class="clock-xmas">
      <p  class="clock-text">Christmas</p>
      <p id="xmas-time"></p>
    </div>
 
    <div class="clock-dday">
      <p class="clock-text">🎄Christmas D-Day🎄</p>
      <p id="day-cnt"></p>
    </div>
  </div>
</div>

 

css

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
 
  font-family: 'Press Start 2P', cursive;
  color: white;
  
  background-image: url('background-img.jpg');
  /* opacity: 0.5; 
  투명하게 하는 속성 but) but)안에 자식들까지 같이 투명해짐*/
  background-size: cover;
  background-attachment: fixed;
}
body{
  width:100%;
  height: 100vh;
  position: relative;
}
 
.container{
  height: 100%;
 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
  position: absolute;
  top: 0;
  left: 30%;
}
 
h1{
  width: 800px;
 
  font-size: 80px;
  text-align: center;
 
  text-shadow: #18206B 5px 10px 1px;
}
 
.clock{
  width: 650px;
  height: 310px;
  
  margin-top: 30px;
  line-height: 40px;
 
  color: #4E681F;
 
  text-align: center;
}
.clock > div{
  height: 100px;
  margin: 10px;
  background-color: rgb(255,255,255,0.8);
  border-radius: 30px;
}
 
p{
  margin: 10px 0 10px 0;
  font-size: 20px;
  font-weight: 900;
  font-family: "Jersey 10", sans-serif;
}
.clock-text{
  font-size: 40px;
  color: #ffffff;
  text-shadow: #4E681F 2px 2px 1px ;
}
.clock > div:hover{
  background-color: #ffffffaf;
}

1. opacity 속성
   opacity: number | initial | inherit
   
   • number : 0.0부터 1.0까지의 수를 넣기
   • initial : 기본값으로 설정
   • inherit : 부모 요소의 속성값을 상속받기
   * 숫자가 작을수록 투명해집니다
   * 자식요소 까지 같이 투명해집니다

javascript

let timer = setInterval(function(){
  const now = document.querySelector('#now-time');
  const xmas = document.querySelector('#xmas-time');
  
  let nowTime = new Date();
  let xmasTime = new Date(`${nowTime.getFullYear()}-12-25`);
  //크리스마스 년도만 올해로 가져오기
  
  let diff = xmasTime - nowTime;
  
  //Math.floor=소수 부분을 버림하고 정수부분만 나오게 함
  //숫자 계산부분은 별칭으로 따로 빼두기
  const D_DAY = Math.floor(diff / (1000 * 60 * 60 * 24));
  const D_DAY_HOUR = Math.floor((diff / (1000 * 60 * 60)) % 24);
  const D_DAY_MIN = Math.floor((diff / (1000 * 60)) % 60);
  const D_DAY_SEC = Math.floor((diff / 1000) % 60);
  
  //현재 날짜,시간
  let nowMonth = nowTime.getMonth()+1;
  let nowDate = nowTime.getDate();
 
  let nowHour = nowTime.getHours();
  let nowMin = nowTime.getMinutes();
  let nowSec = nowTime.getSeconds();
  
  now.textContent = `${nowTime.getFullYear()}-${nowMonth < 10 ? `0${nowMonth}` : nowMonth}-${nowDate < 10 ? `0${nowDate}` : nowDate}
  ${nowHour < 10 ? `0${nowHour}` : nowHour}h ${nowMin < 10 ? `0${nowMin}` : nowMin}m ${nowSec < 10 ? `0${nowSec}` : nowSec}s`;
  
  //올해 크리스마스 날짜,시간
  xmas.textContent = `${xmasTime.getFullYear()}-${xmasTime.getMonth()+1}-${xmasTime.getDate()}`;
  
  //크리스마스까지 D-day,시간
  const dayCnt = document.querySelector('#day-cnt');
  
  let dDay = D_DAY;
  let dHour = D_DAY_HOUR;
  let dMin = D_DAY_MIN; 
  let dSec = D_DAY_SEC;
  
  dayCnt.textContent = `D-
  ${dDay} / 
  ${dHour < 10 ? `0${dHour}` : dHour}h
  ${dMin < 10 ? `0${dMin}` : dMin}m
  ${dSec < 10 ? `0${dSec}` : dSec}s`;
    pads
}, 1000) // 1초마다 함수가 실행되도록 설정

• new Date() 로 인수에 아무것도 적지 않으면 현재 시간을 생성해 줍니다.
• let diff = xmasTime - nowTime; 으로 크리스마스까지 얼마나 남았는지 계산합니다.
• 시간 계산
  1) 초(secs)는 총 60초로 구성되어 있고, 61초가 되는 순간 다음 1초로 넘어간다. 그전에 결과값이 밀리초(1초 = 1000ms)로 되어 있기 때문에 1000으로 나눠줘야 한다. 최대가 60초이기 때문에 '%' 연산자를 이용하여 60으로 나눈 나머지 값이 이 결과값의 '초'가 된다. (100초라고 할 때, 100 % 60 = 40초로 이해하면 쉽다.)
  2) 분(mins)은 총 60분으로 구성되어 있다. 또 분은 초로 구성되어 있기도 하다. 따라서 기존 초를 구하는 계산식에 1000 * 60을 해줘서 초를 포함시켜주고, 최대가 60분이기 때문에 똑같이 '%' 연산자를 이용하여 60으로 나눈 나머지 값을 구해준다.
  3) 시간(hours)은 총 24시간으로 구성되어 있다. 또 시간은 분과 초로 구성되어 있기도 하다. 따라서 60 * 60으로 초와 분을 포함시켜주고, 최대가 24시간이기 때문에 '%' 연산자로 24로 나눈 나머지 값을 구해준다.
  4) 일(days)은 앞에 있는 초, 분, 시간을 모두 포함하고 있기 때문에 60 * 60 * 24로 모두를 포함시켜 주고, 일은 최대값의 제한이 없기 때문에 '%' 연산자를 이용하지 않는다.
  = Math.floor()은 나누기 후 생기는 소수점을 없애기 위해 사용합니다.
  = 시간은 계산을 해야하기 때문에 가독성을 위해 따로 변수를 생성해서 대문자 상수로 생성해서 사용
• 삼항 연산자를 사용해 남은 시간이 10보다 작아질 경우 앞에 0을 붙여 두 자리로 나타냈습니다. (ex) 9h -> 09h)
• setInterval()함수를 이용해 1000ms=1초 마다 실행되게 했습니다.

 

---

02. SnowFall

html xml

<!-- 눈내리는 효과 -->
<div class="snow">
  <canvas id="canv"></canvas>
</div>

 

css

/* 눈내리는 효과 */
body,div{
  margin:0;
  padding: 0;
}
.snow{
  width:100%;
  height: 100vh;
 
  z-index: 1;
}

 

javascript

// 창이 resizing되면 눈내리는건 반영이 안되서 원래 크기에서만 눈이 내림 
// => resize되면 자동으로 새로고침하게 함
window.onresize = function(){
  document.location.reload();
};
 
//눈내리는 효과
function Snowy() {
  function t() {
    window.requestAnimationFrame(t), $.clearRect(0, 0, w, h), $.fillStyle = "hsla(255,255%,255%,0)", $.fillRect(0, 0, w, h), $.fill();
    for (var i = 0; i < a.length; ++i) f = a[i], f.t += .05, f.t = f.t >= 2 * Math.PI ? 0 : f.t, f.y += f.sp, f.x += Math.sin(f.t * s) * (.3 * f.sz), f.y > h + 50 && (f.y = -10 - Math.random() * r), f.x > w + r && (f.x = -r), f.x < -r && (f.x = w + r), f.draw()
  }
 
  function i() {
    this.draw = function() {
      this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz), this.g.addColorStop(0, "hsla(255,255%,255%,1)"), this.g.addColorStop(1, "hsla(255,255%,255%,0)"), $.moveTo(this.x, this.y), $.fillStyle = this.g, $.beginPath(), $.arc(this.x, this.y, this.sz, 0, 2 * Math.PI, !0), $.fill()
    }
  }
  for (var n, a = [], e = 200, s = 1, o = 1, d = 1.3, r = 20, l = 1, c = 0; c < e; ++c) n = new i, n.y = Math.random() * (h + 50), n.x = Math.random() * w, n.t = Math.random() * (2 * Math.PI), n.sz = 100 / (10 + 100 * Math.random()) * d, n.sp = .15 * Math.pow(.8 * n.sz, 2) * o, n.sp = n.sp < l ? l : n.sp, a.push(n);
  t()
} // 300 을 조절 하면 눈의 양 조절 가능 
var c = document.getElementById("canv"),
  $ = c.getContext("2d"),
  w = c.width = window.innerWidth,
  h = c.height = window.innerHeight;
Snowy(), window.addEventListener("resize", function() {
  c.width = w = window.innerWidth, c.height = h = window.innerHeight
}, !1)

• resize 되면 자동으로 새로고침하게 하기

 

---

 

마무리

보완해야 할 점

1. 해당연도의 크리스마스를 받아오지만, 올해의 크리스마스가 지나면 D-day가 어떻게 업데이트될지 TEST 못해봄

추후 공부 할 내용

1. JS로 애니메이션 구현공부하기 : 아직 혼자 애니메이션 코드 짜기 감이 안 잡힌다