CSS+Native J를 사용하여 간단한 시계를 만듭니다. 효과는 다음과 같습니다
이 효과를 달성하기 위해 HTML, JavaScript 및 CSS의 세 가지 주요 부분으로 나뉩니다.
HTML 부분
HTML 부분은 비교적 간단하여 원점, 시간, 분, 중고, 날짜 및 시간을 갖는 클럭 DIV를 정의합니다. 스케일, 숫자 및 기타 요소의 경우 수량이 비교적 크기 때문에 jvaScript를 사용하여 jvaScript를 사용하여 생성됩니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <link rel = 'stylesheet'href 'href ='외부 CSS 파일 경로 '/> <title> clock </head> <body> <div id = "clock"> <!-origin-> <div> <!-Hour Second-minute-mim-mim-mm-mim-mm-mim-mim-mm-mm-minte id = "Hour-line"> </div> <div id = "minute-line"> </div> <div id = "sec </div> <script type = 'text/javaScript'src = '외부 JavaScript 파일 경로'> </script> </body> </html>
CSS 부분
코드를 시작하기 전에 포지셔닝, 국경-라디우스, 변환 등과 같이 이해해야하는 CSS의 속성이 있습니다.
위치 속성
위치 속성은 요소의 위치를 지정하며, 5 가지 값의 절대, 고정, 상대, 정적, 상속. 기본값은 정적입니다. 즉, 포지셔닝이 없으며 요소는 일반 문서 흐름에 따라 표시됩니다. 여기의 주요 용도는 절대적이고 상대적입니다
절제 값은 요소를 절대 포지셔닝으로 설정하고 예기치 않게 정적으로 배치 한 첫 번째 상단 요소에 비해 위치하십시오. 위치는 '왼쪽', '상단', '오른쪽', '하단'속성을 통해 배치 될 수 있습니다. 상단 요소가 모두 정적으로 배치되면 신체 요소의 위치에 비해 배치됩니다.
이 예에서, 가장 바깥 쪽 div 시계를 상대적으로 설정하고 모든 하부 요소가 절대 절대 위치로 설정된 다음 왼쪽 및 상단과 같은 속성의 값을 설정하여 클록에 대한 위치를 결정합니다.
경계-라디우스 속성
Border-Radius 속성은 둥근 테두리를 요소에 추가합니다. 둥근 모서리의 크기를 설정할 수 있습니다. 이 예에서는이 속성을 사용하여 클럭 요소를 원으로 설정하십시오.
예는 예입니다.
속성 변환
변환 속성은 요소에 2D 또는 3D 회전을 적용하여 요소를 회전, 스케일, 이동 또는 기울일 수 있습니다. 이 예에서는 시간, 분, 두 번째, 스케일 등이 모두 변환 속성을 사용하여 회전됩니다. 또한 변환-오리진 속성은 요소의 기본 점 위치를 설정할 수 있습니다.
CSS 부분의 코드
/*글로벌*/*{마진 : 0; 패딩 : 0;}. 클럭 {너비 : 400px; 높이 : 400px; 테두리 : 10px 솔리드 #333; Box-Shadow : 0px 0px 20px 3px #444 삽입; Border-Radius : 210px; 위치 : 상대; 마진 : 5px 자동; z- 인덱스 : 10; 배경색 :#f6f6f6;}/* 클록 번호*/. clock-num {너비 : 40px; 높이 : 40px; 글꼴 크기 : 22px; 텍스트 정렬 : 센터; 라인 높이 : 40px; 위치 : 절대; z- 인덱스 : 8; 색상 :#555; Font-Family : Fantasy, 'Trebuchet MS';}. z-index : 20;}. 시간 선 {너비 : 100px; 높이 : 4px; 상단 : 198px; 왼쪽 : 200px; 배경색 :#000; Border-Radius : 2px; 변환-오리진 : 0 50%; Box-Shadow : 1px -3px 8px 3px #aaa;}. Minute-Line {너비 : 130px; 높이 : 2px; 상단 : 199px; 왼쪽 : 190px; 배경색 :#000; 변환-오리진 : 7.692% 50%; Box-Shadow : 1px -3px 8px 1px #aaa;}. 높이 : 1px; 상단 : 199.5px; 왼쪽 : 180px; 배경색 :#F60; 변환-오리 진 : 11.765% 50%; Box -Shadow : 1px -3px 7px 1px #bbb;}/* Origin*/. Origin {너비 : 20px; 높이 : 20px; Border-Radius : 10px; 배경색 :#000; 위치 : 절대; 상단 : 190px; 왼쪽 : 190px; z-index : 14;}/* 날짜 시간*/. 날짜 info {너비 : 160px; 높이 : 28px; 라인 높이 : 28px; 텍스트 정렬 : 센터; 위치 : 절대; 상단 : 230px; 왼쪽 : 120px; Z- 인덱스 : 11; 색상 :#555; 글꼴 중량 : 대담한; Font-Family : 'Microsoft Yahei';}. Time-Info {너비 : 92px; 높이 : 30px; 라인 높이 : 30px; 텍스트 정렬 : 센터; 위치 : 절대; 상단 : 270px; 왼쪽 : 154px; Z- 인덱스 : 11; 배경색 :#555; 패딩 : 0; Box-Shadow : 0px 0px 9px 2px #222 삽입;}. 시간 {너비 : 30px; 높이 : 30px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 색상 : #fff; 글꼴 중량 : BOLD;} #MIND-TIME {Border-Left : 1px Solid #ffff; 테두리 오른쪽 : 1px solid #ffff;}/* scale*/. clock-scale {너비 : 195px; 높이 : 2px; 변환-오리진 : 0% 50%; z- 인덱스 : 7; 위치 : 절대; 상단 : 199px; 왼쪽 : 200px;}. 스케일 쇼 {너비 : 12px; 높이 : 2px; 배경색 :#555; float : 왼쪽;}. Scale-Hidden {너비 : 183px; 높이 : 2px; float : 왼쪽;}JavaScript 부분
JS 부분에 대해 할 말이 없습니다. 간단한 DOM 작업의 경우 SetInterval 기능이 초마다 실행되며 포인터의 각도와 디스플레이 시간이 변경됩니다. 코드는 다음과 같습니다
(function () {wind '일요일', '월요일', 'tue', 'tue', 'tue', 'friday', '일요일', '일요일', 'tue', '금요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '', '', '', '', '', '', '', '', '' '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '일요일', '', '', '' ',' ',' ''; getElementByID ( "시간 시간"); this_day.getseconds (); + 1); var = <10)? second_line.transform = 'rotate (' + (second*6-90) + 'deg); this_day.gethours (); } setInterVal (settime, 1000); }, { "왼쪽": r + r -0.5 * W, "상단": r -0.5 * h}, { "왼쪽": r + r -0.5 * w, "상단": r -0.5 * h}, { "왼쪽": r + 0.5 * r * 1.73205- 0.5 * w, "top": r + 0.5 * h}, { "": r + 0.5 * H}, W, "상단": R + 0.5 * r * 1.732-0.5 * H}, { "왼쪽": R -0.5 * W, "Top": R + 0.5 * R * 1.732-0.5 * H}, { "왼쪽": r -0.5 * r -0.5 * W, "상단": R + 0.5 * r * 1.732- 0.5 * H}, {r -0.5 *. W, "상단": R + 0.5 * r * 1.732-0.5 * H}, { "왼쪽": R -0.5 * R * 1.73205-0.5 * W, "Top": R + 0.5 * r -0.5 * H}, { "왼쪽": R -0.5 * R -0.5 * H}, {왼쪽 ": R- 0.5 * r * 1.73205 * W" 0.5 * r -0.5 * h}, { "왼쪽": r -0.5 * r -0.5 * h}, { "왼쪽": r -0.5 * r -0.5 * w, "상단": r -0.5 * r * 1.73205-0.5 * H}, { "왼쪽": r -0.5 * r -0.5 * w, "상단": r * r * r * r * r * r * r * r * r * r * r *. "왼쪽": "왼쪽": r -0.5 * r -0.5 * W, "상단": r -0.5 * R * 1.73205-0.5 * H} : r- 0.5 * W, "상단": r -r -0.5 * h}; if (i%3 == 0) {clock.innerhtml += "<div class = 'clock-num em_num'>" +i +"</div>"; for (var i = 0; i <clock_num.length; i ++) {clock_num [i] .style.left = numxy [i] .style.top = numxy [i] .top+'px'; class = 'clock-scale'> " +"<div class = 'scale-hidden'> </div> " +"<div class = 'scale-show'> </div> " +"</div> ";} var scale = document.getElementsByclassName ("clock-scale "); for (var i = 0; i <scale.length (i ++) {i]. 6-90) + "deg)";위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.