그럼에도 불구하고

👨‍💻

시계 만들기 본문

JavaScript/Function implementation

시계 만들기

zenghyun 2023. 1. 3. 18:41

 

시간, 분, 초를 나타낼 수 있는 시계를 만들어보자

 

 

조건: 

1. 현재 시간에 맞는 시간을 출력한다.

2. 시간, 분, 초를 두 자리로 출력하되 10이 넘지 않는 (1~9)의 경우 앞에 0을 붙여서 출력한다.

 

 

clock.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./clock.css">
  <script src="./clock.js" defer></script>
</head>
<body>
<main class="container">
  <div class="current-time">
  <span class="hour"></span>
  : <span class="minute"></span>
  : <span class="second"></span>
  </div>
</main>
</body>
</html>

 

clocl.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 400px;
  height: 200px;
  margin: 300px auto;
  background-color: skyblue;
  border-radius: 70px;
  border: 5px solid  antiquewhite;
}
.current-time  {
  font-size: 60px;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 170px;
  text-shadow: 3px 3px  5px black;
}

 

clock.js

const hourElement = document.querySelector('.hour');

const minuteElement = document.querySelector('.minute');

const secondElement = document.querySelector('.second');

let timer = null; 

function update() {

  const currentTime = new Date();

  const hour = currentTime.getHours();
  hourElement.innerText = addZeroPadding(hour);

  const minute = currentTime.getMinutes();
  minuteElement.innerText = addZeroPadding(minute);

  const second = currentTime.getSeconds();
  secondElement.innerText = addZeroPadding(second);

  cancelAnimationFrame(timer);
  timer = requestAnimationFrame(update);
}

update();

/**
 * 2가지 형식이 되도록 앞부분에 0을 추가하는 함수
 * @param {*} num
 * @returns {string} 
 */
function addZeroPadding(num){
  return  String(num).padStart(2, '0');
}

 

리뷰

처음에는 내 생각과 다르게 동작하지 않았다.

live server를 구동시켰을 때, 그 순간의 시간을 출력하지 시간이 흐르지 않았다.

 

그 이유는 한번 호출한 update() 함수는 다시 호출되지 않기 때문이다.

 

어떻게 하면 시간이 흐를 수 있게 만들지 구글링 해보다가 requestAnimationFrame() 메서드를 발견했다.

 

 

 

[ requestAnimationFrame() ]

requestAnimationFrame()은 브라우저에게 수항 하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출한다. 

 

이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받는다. 

 

※ 다음 리페인트에서 그다음 프레임을 애니메이트 하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame()를 호출해야 한다.

 

화면에 새로운 애니메이션을 업데이트할 준비가 될 때마다 이 메서드를 호출하는 것이 좋다.

이는 브라우저가 다음 리페인트를 수행하기 전에 호출된 애니메이션 함수를 요청한다. 콜백의 수는 보통 1초에 60 회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게 된다.

 

+  새로운 requestAnimationFrame을 생성하면, 이전 것은 반드시 cancelAnimationFrame을 통해 삭제해야 한다. 

그렇지 않으면 콜백 리스트에 계속해서 쌓이게 된다. 

 

[ !cancelAnimationFrame() ]

requestAnimationFrame()를 취소하는 방법으로 cancelAnimationFrame()를 사용한다. 마치 setTimeout()의 clearTimeout()처럼 동일하게 사용하고 동작한다. 

 

아래와 같이 사용할 수 있다.. 변수를 requestId를 저장하고 매개변수로 넘기면 된다.

myReq = requestAnimationFrame(callback);
cancelAnimationFrame(myReq);



ref:

 

 

[자바스크립트] requestAnimationFrame()을 사용하는 방법 및 예제

자바스크립트의 내장함수인 requestAnimationFrame()에 대하여 알아봅니다. 애니메이션 구현시 꼭 필요한 방법 중 하나입니다.

webisfree.com

 

 

window.requestAnimationFrame() - Web API | MDN

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의

developer.mozilla.org

 

저작자표시

'JavaScript > Function implementation' 카테고리의 다른 글

array.sort() 오름차순, 내림차순 정렬하기  (0) 2023.01.04
encodeURIComponent로 네이버 검색하기  (0) 2023.01.03
이미지 갤러리 (라이트 박스) 만들기  (0) 2022.12.30
숫자 반환하기  (0) 2022.12.29
정규 표현식으로 특정 문자 검색하기  (1) 2022.12.28
'JavaScript/Function implementation' Related Articles more
Comments