[JavaScript30] Day 2

JS and CSS Clock

function setDate() {
  console.log('Hi');
}

setInterval(setDate, 1000); // 1초마다 hi라는 콘솔이 찍히는지 확인

 

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  console.log(seconds);
}

setInterval(setDate, 1000);

 

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90; // 초침의 시작은 12부터라서 90도를 더함
  console.log(seconds);
}

setInterval(setDate, 1000);

 

const secondHand = document.querySelector('.second-hand');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90; // 초침의 시작은 12부터라서 90도를 더함
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  console.log(seconds);
}

setInterval(setDate, 1000);

 

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  
  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;
}

setInterval(setDate, 1000);

 

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  
  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setDate(); // setInterval 작동전에 시,분,초침 시간에 맞게 셋팅
setInterval(setDate, 1000);

 

초침으로 확인했을 때, 초침이 12에 가는 순간 이상한 움직임을 보임

초침이 12를 가리키는 순간에 이상함 움직임

각도가 444도에서 → 90도로 변하면서 생기는 움직임 (444도는 ((59 / 60) * 360) + 90을 계산한 수)

이때를 transition이 보여주기 때문에 이상하게 보이게 된다.

매 초마다 초침의 각도 체크

→ [해결방법]

1. transition을 제거한다.

transition을 제거하면 444에서 90으로 변하는 순간을 보여주지 않기 때문에 이상한 움직임 사라지게 된다.

 

 

 

 

---

Date : 시간을 나타내는 표준 내장 객체- Date 객체를 생성하는 유일한 방법은 new Date();입니다.

Date.getSeconds() : 현지 시간 기준 초를 반환하는 메서드

Date.getMinutes() : 현지 시간 기준 분을 반환하는 메서드

Date.getHours() : 현지 시간 기준 시를 반환하는 메서드

setInterval() : 일정 시간마다 지정된 코드를 반복 실행하는 타이머 함수

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)