JS+HTML로 시계 애니메이션 만들기

이번에는 시계 애니메이션을 만들기 위한 JS+HTML을 가져오겠습니다. JS+HTML로 시계 애니메이션을 만들 때의 노트는 무엇인가요?

관련된 지식 포인트는 다음과 같습니다: CSS3 애니메이션, DOM 작업, 타이머, 도트 좌표 계산(많은 사람들이 이미 선생님에게 돌려주었습니다~)
다음으로 5단계를 사용하여 만듭니다

1단계, HTML 준비

먼저 HTML 구조, 배경, 다이얼, 바늘(시침, 분침, 초침), 숫자를 준비해야 합니다.

rreee

2단계, CSS 준비

포인터의 색상과 크기를 정의합니다. 설명해야 할 것은 포인터를 회전하는 데는 변환: 회전(-90deg); 은 회전 중심점을 설정하는 데 사용된다는 것입니다.

rreee

3단계, 시침 위치 계산

JS는 Date 객체를 통해 현재 시간을 얻고, getHours는 시간을 얻고, getMinutes는 분을 얻고, getSeconds는 초를 얻습니다. 시침은 12눈금에 1번 회전하며, 각 눈금의 각도는 360°/12이며, 분과 초는 모두 60눈금이며, 각 눈금의 각도는 360°/60입니다.

rreee

step4, 시계가 돌아가는 중

setInterval을 통해 타이머를 설정하고 매초 새로 고칩니다. 초기화는 한 번 실행해야 합니다. 그렇지 않으면 1초 후에 효과가 표시됩니다.

rreee

step5, 디지털 시간 그리기

디지털 시간도 원 위에 있습니다. 반경을 결정한 다음 반경의 좌표를 얻으면 됩니다. 각 숫자를 왼쪽에 배치하면 됩니다. 원형 좌표계의 계산 규칙을 ​​살펴보세요:

* 원 반경 좌표 계산:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle)
그러나 우리가 계산하는 좌표는 호 위의 점 좌표입니다. 위치를 지정할 때 각 숫자는 요소의 왼쪽 상단을 기준으로 배치되므로 숫자가 오프셋됩니다. 즉, 숫자의 중심점이 호 위에 있지 않습니다. 해결책은 좌표점(x, y)을 그 자체의 절반(x-w/2, y-h/2)
으로 변환하여 중심점이 되도록 하는 것입니다. 숫자의 호에 있습니다.

rreee

완전한 JS 코드:

<p id="clock">
 <p class="bg">
  <p class="point">
   <p id="hour"></p>
   <p id="minute"></p>
   <p id="second"></p>
   <p class="circle"></p>
  </p>
 </p>
< /p>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue2.0에서 전역 스타일을 설정하는 단계에 대한 자세한 설명

js 범위 사용에 대한 자세한 설명

Emergence.js 플러그인 사용에 대한 자세한 설명

위 내용은 JS+HTML로 시계 애니메이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!