시계를 생성하는 과정에서 다이얼을 작성하는 다음과 같은 방법을 생각했습니다.
물론, 해당 패턴을 사용하여 달성 할 수 있으므로 최선의 이해를 사용해야하며 코드는 비교적 간단한 구현 방법이 있습니다.
1. 삼각 함수를 사용하십시오
JS를 사용하여 다이얼을 삼각형 함수로 배열하는 과정에서, 나는이 상황에 직면했다. 다이얼의 규모에서, 삼각형 함수로 특정 값을 계산할 때 정수를 얻을 수없고, 둥글게 또는 아래로 내려야하므로, 약간의 편차가 보이지 않게 될 것이며, 그러한 편차는 Styles와 조절하기가 어렵다. 최종 효과를 달성 할 수 있더라도 미묘한 간격과 각도의 편차는 전반적인 시각적 경험에 영향을 미칩니다. 프로그램 개발자로서, 그러한 시각적 경험은 다른 사람들이 인식하고 포기하기가 어렵습니다.
2. 마스킹 레이어를 사용하십시오
JS는 주로 다이얼 스케일에서 마스킹 레이어를 사용합니다. 다이얼 스케일의 길이는 짧고 5 개의 스케일마다 더 긴 스케일이 있습니다. 이런 식으로 마스킹 레이어를 사용하는 스케일의 길이는 동일하며 다른 스케일을 계속 조정하기가 어렵 기 때문에 포기합니다.
3. 활용 포지셔닝 및 (아버지-자녀 관계) (권장)
나는 포지셔닝 방법과 아버지-자녀 관계를 이해하고 시작하는 것이 가장 좋다고 생각합니다. 여기서 당신과 공유하겠습니다. 구현 코드는 다음과 같습니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "screen"> * {margin : 0; 패딩 : 0; } #Clock {너비 : 600px; 높이 : 600px; 테두리 : 4px 솔리드 라이트 그레이; 마진 : 자동; 위치 : 상대; 국경-라디우스 : 50%; } #scale {너비 : 20px; 높이 : 100%; 위치 : 절대; 왼쪽 : 50%; 마진 왼쪽 : -10px; /*배경 : 녹색;*/} #point {너비 : 4px; 높이 : 10px; 배경 : LightGray; 마진 : 자동; } #number {너비 : 20px; 높이 : 20px; 마진-탑 : 5px; /*배경 : 빨간색;*/ font-size : 20px; 텍스트 정렬 : 센터; 라인 높이 : 20px; } #hour {너비 : 12px; 높이 : 180px; 배경 : 빨간색; Border-Radius : 6px; 변환-오리진 : 50% 150px; 위치 : 절대; 상단 : 150px; 왼쪽 : 50%; 마진 왼쪽 : -6px; } #minute {너비 : 8px; 높이 : 250px; 배경 : 오렌지; 위치 : 절대; Border-Radius : 4px; 변환-오리진 : 50% 200px; 상단 : 100px; 왼쪽 : 50%; 마진 왼쪽 : -4px; } #second {너비 : 4px; 높이 : 360px; 배경 : 빨간색; Border-Radius : 2px; 위치 : 절대; 상단 : 0; 왼쪽 : 50%; 마진 왼쪽 : -2px; 변환-오리진 : 50% 300px; Z- 인덱스 : 100; }. var hour = document.getElementById ( '시간'); var minute = document.getElementById ( 'minute'); var second = document.getElementById ( 'Second'); 함수 표면 () {var currentDate = new Date (); var 시간 = currentDate.gethours (); var minds = currentDate.getMinutes (); var seconds = currentDate.getSeconds (); 초 = 시간 * 3600 + 분 * 60 + 초; Hour.style.transform = '회전 ('+seconds / 120+'deg)'; minute.style.transform = '회전 ('+초 * 0.1+'deg)'; second.style.transform = '회전 ('+seconds * 6+'deg)'; } setInterVal ( 'surface ()', 1000); for (var i = 1; i <61; i ++) {var scale = document.createElement ( 'div'); scale.id = 'scale'; scale.style.transform = '회전 ('+i * 6+'deg)'; Clock.AppendChild (스케일); var point = document.createelement ( 'div'); point.id = 'point'; scale.appendChild (포인트); var number = document.createelement ( 'div'); 번호 .id = '번호'; number.style.transform = '회전 (-'+i * 6+'deg)'if (i % 5 == 0) {number.innerhtml = i / 5; point.style.height = '15px'; } scale.appendChild (번호); } </script> </html>교정 중에 메모를 지불해야합니다.
1. 다음은 단계별로 구현되는 렌더링 다이어그램입니다. 마지막으로 세부 사항이 밀접하게 일치합니다. 다른 방법은 미세 조정에 사용되지 않습니다. 스타일 레이아웃이 완료된 후 현재 시간을 얻고 수정할 수 있습니다. 보정 과정에서 그러한 문제가 있습니다. 모든 사람이주의를 기울일 수 있기를 바랍니다. 시간의 회전 각도는 시간 단위로 계산할 수 없습니다. 예를 들면 : 9:58이 시점에서, 시간 포인팅의 위치는 9입니다. 10:00의 경우, 시간의 다음 위치는 10의 위치로 점프됩니다. 따라서 시간 손의 각도는 몇 분 또는 초로 계산되어야하며 분은 분 또는 초로 계산해야합니다. 가운데는 초당 6도 점프합니다.
2. 또 다른 점에 주목해야 할 것은 포인터의 회전 지점을 결정하기 위해 세 포인터의 회전 센터를 변환-오리진을 사용하여 결정해야한다는 것입니다.
위의 기사에서는 시계 생성 (JS 필기 간결한 코드)이 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.