몇 가지 기본 CSS 속성으로 아날로그 12 시간 시계를 만들려고했습니다. 500px의 사각형 div를 만드는 것으로 시작합니다. 그런 다음 테두리 반경을 250 픽셀로 설정하고 멋진 원을 만듭니다. 그 후에, 나는 12 개의 눈금을 더하고, 그것들을 절대적으로 위치 시키며, 그것들의 대응 위치를 얻는다. 우리 원CSS : 경계선 반경이있는 시계 만들기
- 12 눈금 에게
- 12분의 360 = 30 °를
- 360 :
각 눈금에 대한 각도 (간단한 연산을 맞춤법에 사과)이 기반으로 각도
각 눈금에 대한 위치는 몇 가지 기본 삼각법을 사용하여 계산할 수 있습니다. 나는 θ (0 °, 30 °, 60 ° 등)와 반경 (250)을 알고 있고, cos과 sin을 사용하여, 관련된 위쪽, 아래쪽, 왼쪽 및 오른쪽 값을 알아낼 수 있습니다. 왼쪽 또는 오른쪽 값 (x)을 얻으려면 다음을 사용하면됩니다. r * sin θ. 상단 또는 하단 값 (y)을 얻으려면 r - (r * cos θ)을 사용할 수 있습니다. 다행히 아래의 이미지 (MS 페인트 부족 스킬 부족)는 내가하려는 것을 정리하는 데 도움이 될 수 있습니다. 나는이 방정식을 일단
, 그것은 각각의 x와 y 값을 얻기 위해 훨씬 쉬워집니다 : 나는 너무 오랫동안에 질문을 끌고으니
θ (angle) | 250 * sin θ [x] | 250 - (250 * cos θ) [y]
--------------------------------------------------------------
30° (1:00) | right: 125px | top: 33.5px
60° (2:00) | right: 33.5px | top: 125px
90° (3:00) | right: 0px | top: 250px
120° (4:00) | right: 33.5px | bottom: 125px
150° (5:00) | right: 125px | bottom: 33.5px
180° (6:00) | right: 250px | bottom: 0px
210° (7:00) | left: 125px | bottom: 33.5px
240° (8:00) | left: 33.5px | bottom: 125px
270° (9:00) | left: 0px | bottom: 250px
300° (10:00) | left: 33.5px | top: 125px
330° (11:00) | left: 125px | top: 33.5px
360° (12:00) | left: 250px | top: 0px
을 .. 내 질문은 왜 2, 3, 4, 8, 9 및 10의 모든 눈금 표시가 약간 떨어져 있을까요? 내 계산을 기반으로 (나는 항상 그것을 말하고 싶었다), 나는 이러한 문제를 겪어서는 안된다. 물론, 나는 약간의 반올림을하고 일부 시그마 무화과를 버렸지 만, 위치를 워키 해 보이게하는 것은 중요하지 않습니다.
html로
<body>
<div id="clock">
<div id="one" class="oneEleven tick"></div>
<div id="two" class="twoTen tick"></div>
<div id="three" class="threeNine tick"></div>
<div id="four" class="fourEight tick"></div>
<div id="five" class="fiveSeven tick"></div>
<div id="six" class="sixTwelve tick"></div>
<div id="seven" class="fiveSeven tick"></div>
<div id="eight" class="fourEight tick"></div>
<div id="nine" class="threeNine tick"></div>
<div id="ten" class="twoTen tick"></div>
<div id="eleven" class="oneEleven tick"></div>
<div id="twelve" class="sixTwelve tick"></div>
</div>
</body>
CSS의
#clock {
height: 500px;
width: 500px;
border-radius: 50%;
border: 1px solid black;
position: relative;
}
.tick {
background-color: black;
height: 20px;
width: 5px;
position: absolute;
}
.oneEleven {
/* ~6.7% */
top: 33.5px;
}
.twoTen {
/* 25% */
top: 125px;
}
.threeNine {
/* 50% */
top: 250px;
}
.fourEight {
/* 25% */
bottom: 125px;
}
.fiveSeven {
/* ~6.7% */
bottom: 33.5px;
}
#one {
right: 125px;
transform: rotate(30deg);
}
#two {
/* ~93.3% */
right: 33.5px;
transform: rotate(60deg);
}
#three {
right: 0px;
transform: rotate(90deg);
}
#four {
right: 33.5px;
transform: rotate(120deg);
}
#five {
right: 125px;
transform: rotate(150deg);
}
#six {
left: 250px;
bottom: 0px;
}
#seven {
left: 125px;
transform: rotate(-150deg);
}
#eight {
left: 33.5px;
transform: rotate(-120deg);
}
#nine {
left: 0px;
transform: rotate(-90deg);
}
#ten {
left: 33.5px;
transform: rotate(-60deg);
}
#eleven {
left: 125px;
transform: rotate(-30deg);
}
#twelve {
left: 250px;
top: 0px;
}
jsFiddle : 여기 내 코드입니다. 언뜻보기에는 완전히 명확하지 않지만 참조한 눈금을 보면 서클에 줄이 보이지 않습니다. 나는 결국 비율로 이동하려고합니다. 그러나 왜 그들이 꺼져 있는지 알고 싶습니다. 그리고 이것은 스타일링을 추가하려는 원을 만드는 가장 좋은 방법입니까? HTML5 canvas tag이 있다는 것을 알고 있지만 작업하기가 너무 어려워서 수행해야 할 것보다 더 많은 처리 작업을 수행하고 싶습니다.
도움이 될만한 점이 있습니까?
http : // stackoverflow와 같은 작업을 시도해 볼 수도 있습니다.com/questions/12813573/circle-to-circle/12817454 # 12817454이 방법으로 각 각도마다 sin 및 cos를 계산할 필요조차 없습니다. 또한, 당신은 JS를 통해 진드기를 생성 할 수 있습니다. http://codepen.io/thebabydino/pen/qgoBL – Ana