또 다른 시계 효과가오고 있습니다. 이 구현에는 캔버스가 필요하지 않으며 Div, Ul 및 Li에 의해 그려집니다.이 구현은 재미 있고 현실적입니다.
하하 ~
JS는 주위를 움직이는 효과를 달성해야하지만 JS에는 내용이 많지 않으므로 어렵지 않습니다.
주로 CSS에서 변환을 사용한다는 아이디어입니다. 변환에는 많은 변화가있는 속성과 일반 시계가 있습니다
내 마음 속에 둥근 것입니다. 그렇다면이 속성을 회전하여 구현할 수 있습니까? 그 규모
회전을 사용하고 원의 중앙에 회전 지점을 설정하면 원의 중심을 돌릴 수 없습니까? 시간의 바닥은 그렇지 않습니다
원의 중심이 접촉 중입니까? 그런 다음 시간의 바닥을 회전 지점으로 설정해도 괜찮습니다. 나는 내 아이디어에 대해 대략 이야기합니다.
암호:
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> transform </title> <style id = "css"> #clock {width : 200px; 높이 : 200px; 국경 : 2px Solid #000; 국경-라디우스 : 50%; 마진 : 100px auto 0; 위치 : 상대; } #Clock ul {너비 : 200px; 높이 : 200px; 위치 : 상대; 목록 스타일 : 없음; 패딩 : 0; 여백 : 0; } #Clock ul {너비 : 200px; 높이 : 200px; 위치 : 상대; 목록 스타일 : 없음; 패딩 : 0; 여백 : 0; } #Clock ul {너비 : 2px; 높이 : 10px; 배경 : #000; 변환-오리진 : 센터 100px; 위치 : 절대; 상단 : 0; 왼쪽 : 50%; } #Clock ul Li : nth-of-type (5n+1) {높이 : 20px; } #hour {높이 : 40px; 너비 : 4px; 배경 : #00Fefe; 위치 : 절대; 상단 : 60px; 왼쪽 : 99px; 변환-오리진 : 중앙 바닥; } #min {높이 : 60px; 너비 : 3px; 배경 : #001afe; 위치 : 절대; 상단 : 40px; 왼쪽 : 99px; 변환-오리진 : 중앙 바닥; 변환 : 회전 (15deg); } #sec {높이 : 70px; 너비 : 2px; 배경 : #000; 위치 : 절대; 상단 : 30px; 왼쪽 : 99px; 변환-오리진 : 중앙 바닥; } #dot {너비 : 10px; 높이 : 10px; 위치 : 절대; 왼쪽 : 95px; 상단 : 95px; 배경 : #AAA; 국경-라디우스 : 50%; } </style> </head> <hod> <body> <div id = "clock"> <ul> </ul> <div id = "Hour"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot"> </div> </div> <cript> var ocss = document.getElementByid ( "css"); var oclock = document.getElementById ( "clock"); var oul = oclock.getElementsByTagName ( "ul") [0]; var ohour = document.getElementById ( "시간"); var omin = document.getElementById ( "Min"); var osec = document.getElementById ( "sec"); var strli = ""; var strcss = ""; for (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } oul.innerhtml = strli; for (var i = 0; i <60; i ++) {strcss+= '#clock ul li : nth-of-type ('+(i+1)+') {transform : rotate ('+i*6+'deg);}'; } ocss.innerhtml+= strcss; 시간(); setInterval (시간, 1000); 함수 시간 () {var date = new Date (); var h = date.gethours (); var m = date.getMinutes (); var s = date.getSeconds (); Ohour.style.transform = "회전 ("+(h+m/60)*30+"deg)"; omin.style.transform = "rotate ("+(m+s/60)*6+"deg); osec.style.transform = "rotate ("+s*6+"deg)"; } </script> </body> </html>태그로 그리는 데있어 가장 중요한 것은 포지셔닝입니다. 이런 식으로 우리는 원하는 위치에 형성된 상자를 형성 할 수 있기 때문입니다. 내부 CSS 스타일 시트는 요소를 얻어 얻을 수 있으므로 내부 html을 사용하여 스타일을 추가하고 루프에 추가 할 수 있습니다. 많은 스케일도 있으므로 루프를 사용하여 추가하여 시간과 노력을 절약 할 수 있습니다. 남은 시간은 1 초마다 함수를 실행하여 이동할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.