HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법은 무엇입니까?

이 튜토리얼에서는 HTML 및 CSS을 사용하여 아날로그 시계를 디자인하고 JavaScript를 사용하여 작동하도록 만들어 보겠습니다. 이 시계는 현재 시간을 시, 분, 초 형식으로 표시합니다.

Approach

• Date 개체를 사용하고 일부 계산을 통해 시간 , 분 및 초 을 표시합니다.

• getHours(), getSecond() 및 getMinutes()와 같은 기능을 가진 JavaScript 개체 Date()에서 시스템 시간을 가져옵니다.

• 을 얻은 후 시 , 분 및 초 형식을 적용하여 세 바늘 시, 분, 초의 회전을 모두 변환합니다.

아날로그 시계는 끊임없이 움직이는 세 개의 바늘을 통해 시간을 표시하며 시간을 표시하면서 1부터 12까지 표시합니다.

HTML

index.html이라는 이름의 HTML 파일을 만들고 상용구 코드를 추가하세요. 이것은 아래와 같이 기본 HTML 구문입니다. HTML 코드 내부에는 이 세 가지 사이에 "sizeOfAnalog"라는 이름의 div가 있습니다. div의 내용은 동일합니다. 이름이 hour_clock, Minutes_clock, second_clock인 클래스 이름 "sizeOfAnalog"입니다.

CSS

HTML 코드에 내부 JavaScript는 물론 내부 CSS도 추가하겠습니다. 내부 CSS를 적용하려면 태그를 사용하고, 내부 JavaScript를 적용하려면 <script></script>를 사용하세요.

JavaScript

JavaScript 부분에서는 주요 로직 작업을 수행합니다. JavaScript Date() 개체와 해당 함수 getHours(), getSecond() 및 getMinutes()를 사용하여 현재 시간을 시, 분, 초 단위로 가져옵니다. 시, 분, 초 형식이 있으면 시, 분, 초의 세 바늘을 모두 변환하는 회전을 적용합니다.

Steps

1단계 - "Background: url(clock.png) no-repeat;"code를 사용하여 화면에 시계의 배경 이미지를 적용합니다. 여기서 no-repeat는 반복되는 이미지.

2단계 - 이제 Date() 개체를 사용하여 현재 시간을 가져오고 Date 개체에서 각각 현재 시간, 분, 초를 가져올 수도 있습니다. 이제 HTML 코드에서 시, 분, 초를 가져와 손의 회전을 360도로 변환하겠습니다.

3단계 - 아시다시피 360도 이후에는 1회전으로 간주됩니다. 따라서 이 360도에서 총 12시간을 얻으려면 (360/12)를 사용하면 1시간에 30도를 얻을 수 있습니다.

4단계 - 360분 총 60분이 필요하므로 분당 동일하므로 (360/60) = 분당 6도 필요함을 사용하여 수행할 수 있습니다.

5단계 - setInterval()을 사용하는 JavaScript 부분에서는 1초가 1000ms와 같기 때문에 1000ms(밀리초)마다 설정된 시계를 실행할 수 있습니다.

따라서 new를 사용하여 날짜 개체 Date()

0과 23 사이의 시간을 가져옵니다.getHours()

0과 59 사이의 분을 가져옵니다.getMinutes()

0을 가져옵니다. getSeconds()

6단계 사이의 59초 - 세 가지 값이 모두 확보되면 각 바늘을 회전하고 아날로그 시계가 시간을 표시하기 시작합니다.

예제(전체 프로그램)

아래는 HTML, CSS, JavaScript를 사용하여 아날로그 시계를 만드는 전체 코드입니다.

rreee

위 내용은 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!