JavaScript 시계 프로그래밍

이 기사에서는 JavaScript에서 실시간 시계를 구현하는 방법을 살펴봅니다. 쉽게 복제할 수 있도록 코드를 분해하고 설명합니다.

그러나 당신이 노련한 프로그래머이고 코드만을 위해 여기에 있는 경우 솔루션으로 바로 뛰어들 수 있습니다. 그렇지 않은 경우 단계별로 따라하는 것이 좋습니다.

목차

Overview of JavaScript Clock

12 Hours clock using JavaScript

24 Hour clock using JavaScript

JavaScript 시계 개요:

Clocks are of utmost importance on websites where time plays a large factor, e.g: booking websites, e-commerce, etc.

However, given JavaScript supports and lets us manipulate web pages in real-time, building clocks that show the current time in JavaScript has become quite straightforward.

Note: In this article, we look closely at the JavaScript code behind a clock. We do not talk about CSS styling as there are plenty of blogs already available that brief about it. We rather focus largely on the JavaScript code.

Javascript를 사용한 12시간 시계

As the name suggests, in this section we look at how to build a 12 hours JavaScript clock.

자바스크립트 시계 코드(12시간):

설명:

위의 코드는 처음에는 위협적으로 보일 수 있지만 분해하고 나면 매우 간단합니다.
currentTime() 함수를 정의하여 코드를 시작합니다. 함수 내에서 현재 시간을 date라는 변수에 저장합니다.
new Date() 생성자를 사용하여 이를 수행합니다. 이 생성자는 시간대와 함께 브라우저의 날짜를 반환합니다.

참고: 날짜 개체는 정적이므로 계속 업데이트해야 합니다. 이 작업은 나중에 코드에서 수행합니다.

let date = new Date(); 

이 작업이 완료되면 getHours() , getMinutes() 및 getSeconds() 메서드를 사용하여 변수(날짜)에서 시, 분, 초를 추출합니다.

이 메서드는 날짜가 전달될 때 해당 값을 반환하고 다른 변수에 저장합니다.

마지막으로 AM 또는 PM 태그를 저장하기 위해 "session"라는 변수를 사용합니다.

let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";

참고: 여기 date.getHours() 등의 날짜는 현재 날짜를 이전에 저장하는 데 사용한 변수입니다.
date.getHours 메서드는 0-23 사이의 값을 반환하고 12시간 시계를 프로그래밍하는 경우 다음 if 문을 사용하여 12를 0으로 재설정합니다.

if(hh == 0){
      hh = 12;
  }

그리고 다른 if를 사용하여 12보다 큰 시간을 빼고 세션 변수 값을 "PM"에 할당합니다.

if(hh > 12){
    hh = hh - 12;
    session = "PM";
}

다음 코드를 이해하려면 두 가지 개념에 익숙해야 합니다.

첫째, getHours() , getMinutes() 및 getSeconds() 메서드는 각각 0에서 23, 59, 59 사이의 값을 반환합니다. 여기서 요점은 한 자리 값이 #(예: 7)으로 반환되지만 우리 시계에서는 이러한 값이 ##(예: 07)으로 표시되어야 한다는 것입니다.

그리고 이를 달성하기 위해 삼항 연산자를 사용합니다. 이 연산자는 조건이 참이면 값을 반환하고 거짓이면 다른 값을 반환합니다. 아래 구문을 추가했습니다.

(condition ? if true : if false);

이 연산자를 사용하여 10보다 작은 숫자 앞에 0을 추가하여 위의 문제를 해결합니다.

hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;

다음으로 원하는 형식으로 시간을 저장할 변수 시간을 만듭니다.

let time = hh + ":" + mm + ":" + ss + " " + session;

시간을 표시하기 위해 다음 코드를 사용합니다.

document.getElementById("clock").innerText = time 

여기에서 document는 웹페이지를 나타내며 .getElementbyId() 이 경우 "clock"에서 매개변수로 ID가 전달된 요소를 반환합니다. 그리고 innertext 속성은 노드의 컨텍스트를 시간으로 설정합니다.

마지막으로 가장 중요한 부분은 getdate()이 정적 값을 반환한다고 언급한 것을 기억하십시오. setTimeout() 메서드를 사용하여 업데이트합니다. 아래에 구문을 추가했습니다.

setTimeout(function, milliseconds, param1, param2, ...)

이 메서드는 지정된 밀리초 수 후에 함수를 호출하거나 실행합니다. 참고: 1000ms = 1초.

우리는 이 방법을 사용하여 매초마다 코드를 업데이트하여 시계가 계속 실행되도록 합니다.

let t = setTimeout(function(){ currentTime() }, 1000);

그리고 남은 것은 함수를 실행하는 것뿐입니다.

currentTime(); 

24시간제 - 코드 및 설명

The code for a 24-hour clock is quite similar to the previous code, we only have one major change.

설명:

여기서 유일한 차이점은 0에서 12로 변경된 첫 번째 if 문을 제거하고 두 번째 if 문에서 시간을 12로 빼는 조건을 제거한 것뿐입니다.

아래 의견에 귀하의 생각/질문을 알려주십시오.