이것은 그들의 주요 스크립트입니다:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
맨 위에는 다음이 표시됩니다.
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
그냥 추가 썸네일그리고 노란 색조와 화살표.
200?"200px":""+(this.scrollHeight+5)+"px");"> « 00:00:00»
다음은 일어난 일입니다.
따라서 모든 것이 어떻게 변경되었는지 직접 확인할 수 있으며 이제 모든 것을 직접 수행하고 스타일에 맞게 아름답게 설정할 수 있습니다. 다른 사람들이 할 수 없는 일, Flash가 있기 때문에 그들은 여기에 없습니다.
이제 Flash의 추가 시간
200?"200px":""+(this.scrollHeight+5)+"px");">
따라서 가장 좋아하는 것을 선택하여 넣을 수 있습니다. 일부는 블록에 설치할 수 있지만 처음에 더 좋아하는 것은 유연하고 사용자 정의가 가능하기 때문에 누구나 할 수 있기 때문입니다.
우리는 이미 아날로그 시계의 생성에 대해 논의했습니다. CSS 사용그리고 자바스크립트. 이 자습서에서는 CSS3를 사용하여 동일한 시계를 만들어 어떻게 새로운 기준다양한 효과의 개발에 대한 접근 방식을 변경합니다. 이 튜토리얼의 데모는 CSS3 속성을 지원하는 브라우저에서만 작동합니다. 회전(IE6에서는 데모가 작동하지 않습니다).
CSS3 변환:회전
변형:회전- 회전을 허용하는 새로운 CSS 3 속성 다양한 요소. 변형의 도움으로 요소의 크기를 변경하고 가로 및 세로로 왜곡을 도입하고 웹 페이지에서 요소를 이동할 수도 있습니다. 이 모든 것은 속성을 사용하여 애니메이션할 수 있습니다. 이행(와 함께 다른 유형전환 및 기간).
일부를 사용하여 페이지 요소에 애니메이션을 적용하는 동일한 작업을 수행할 수 있습니다. 자바스크립트 라이브러리(예: jQuery). 물론 함께 제이쿼리훨씬 더 많은 변화를 애니메이션화할 수 있습니다. CSS 속성함께보다 이행. 그러나 jQuery는 인라인입니다. CSS 도구, JavaScript 라이브러리는 사용 가능하거나 사용 불가능할 수 있는 외부 도구입니다. 어쨌든 CSS3는 개발자 개발을 위한 새로운 유망한 방향을 제시합니다.
그래픽 아트
먼저해야 할 일 GUI몇 시간 동안. 우리는 기지와 세 개의 화살을 가질 것입니다. 모든 움직이는 부분은 Photoshop에서 높이 600px, 너비 30px로 슬라이스되어 세로로 배치되며 기본 속성은 회전중심을 중심으로 요소를 회전합니다. 속성을 사용할 수 있습니다 변환 원점회전 중심을 다른 지점으로 설정합니다.
모든 이미지를 시계 기반으로 사용할 수 있습니다. 움직이는 부분은 이미지 PNG 형식투명하게.
보관하려면 소스 코드데모 포함 PSD 파일, 모든 이미지가 포함되어 있습니다.
HTML 마크업
시계 마크업은 정렬되지 않은 단순한 목록입니다. 각 목록 요소에는 움직이는 부분이 포함되어 있으며 해당 ID가 있습니다.
CSS
#clock ( 위치: 상대; 너비: 600px; 높이: 600px; 여백: 20px auto 0 auto; background: url(clockface.jpg); 목록 스타일: 없음; ) #sec, #min, #hour ( 위치: 절대 ; 폭: 30px; 높이: 600px; 상단: 0px; 왼쪽: 285px; ) #sec ( background: url(sechand.png); z-index: 3; ) #min ( background: url(minhand.png); z -색인: 2; ) #시간( 배경: url(hourhand.png); Z-색인: 1; )
CSS도 매우 간단합니다. 움직이는 부분은 같은 치수와 시작점을 가지므로 반복을 피하기 위해 함께 선언할 수 있습니다. 요소 울당신이 사용할 수 있도록 상대 위치를 가져옵니다 절대 위치그 안에 있는 화살표 때문입니다.
CSS3는 약간의 jQuery 코드로 적용됩니다.
자바스크립트
- 시계 시간 가져오기
- 계산 및 삽입 CSS 스타일(회전 각도) 각 요소.
- 일정한 간격으로 CSS 스타일을 업데이트하십시오.
jQuery는 새로운 CSS3 속성과 잘 작동합니다. 또한 스타일이 동적으로 추가되기 때문에 CSS 파일은 CSS2.1로 검증됩니다!
시간 얻기
에서 시간을 얻을 수 있습니다. PHP를 사용하여코드이지만 서버 시간이 됩니다. 그리고 JavaScript는 사용자의 현지 시간을 반환합니다.
를 통해 정보를 받게 됩니다. 날짜()모든 변수를 설정합니다. 우리는 그에 따라 사용할 것입니다 GetSeconds(), GetMinutes()또는 GetHours()~을 위한 날짜()초, 분, 시간을 각각 설정하려면:
var 초 = new Date().getSeconds();
위의 줄에서 0에서 59 사이의 숫자를 가져와서 변수에 할당합니다. 초.
각도 결정
그런 다음 각 화살표의 회전 각도를 계산해야 합니다. 시간 원에 60개의 위치가 있는 초침과 분침의 경우 360도를 60도로 나누어야 숫자 6이 됩니다. 즉, 각 초 또는 분은 6도 회전에 해당합니다. 계산 결과를 다른 변수에 저장합니다. 몇 초 동안 코드는 다음과 같습니다.
Varsdegree = 초 * 6;
몇 시간 동안 계산이 달라집니다. 시침에 대해 12개의 위치가 있는 다이얼이 있으므로 각 시간은 30도(360/12=30)의 회전 각도에 해당합니다. 그러나 시침도 중간 상태에 있어야 합니다. 즉, 매분 움직여야 합니다. 즉, 4시 30분에 시침이 3시와 4시 사이에 있어야 합니다. 방법은 다음과 같습니다.
Varhdegree = 시간 * 30 + (분 / 2);
즉, 회전 각도에 시간을 추가하고 분 수를 2로 나눈 값을 추가합니다(0.5에서 29.5 사이의 값을 제공함). 따라서 시침은 0도에서 30도 사이의 각도로 "돌아갑니다"(시간 증분).
예를 들어:
2시간 40분 -> 2*30 = 60도 및 40/2 = 20도. 총: 80도.
회전 값이 360도 이상이므로 시계가 12시 이후에 표시된다고 가정할 수 있습니다. 그러나 모든 것이 잘 작동합니다.
이제 CSS 규칙을 삽입할 준비가 모두 되었습니다.
스타일 설정
이것은 CSS3 규칙의 모습입니다. 회전스타일 시트에서:
#sec ( -webkit-transform: 회전(45deg); -moz-transform: 회전(45deg); )
다음은 jQuery를 사용하여 코드를 삽입하는 방법입니다.
$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));
유일한 문제는 "sdegree" 변수의 결과 각도 값을 45도 대신 구문으로 설정하는 것입니다. 다른 변수에 문자열을 빌드해야 합니다. 회전하다두 번째 인수를 완전히 바꿉니다. 이와 같이:
Var srotate = "rotate(" + sdegree + "deg)";
그리고 jQuery 코드는 다음과 같이 보일 것입니다:
$("#sec").css(("-moz-transform": 회전, "-webkit-transform": 회전));
함께 모아서
jQuery 코드는 다음과 같습니다.
$(document).ready(function() ( setInterval(function() ( var 초 = new Date().getSeconds(); var sdegree = 초 * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var 시간 = new Date() .getHours(), var mins = new Date().getMinutes(), var hdegree = 시간 * 30 + (mins / 2), var hrotate = "rotate(" + hdegree + "deg)", $("#시간 ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = 분 * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ), ), 1000), )),
우리는 사용 자바스크립트 기능 세트간격매 초마다 스타일을 업데이트합니다. 시간 값을 받는 변수는 그 안에서 업데이트되어야 합니다. 그렇지 않으면 시계가 페이지에서 쓸모없는 쓰레기가 될 것입니다.
결론
이 단원에서는 다음을 보여줍니다. 실용속성 회전디자인과 무관하다.
하자 디지털 시계날짜 및 시간 사용 제이쿼리그리고 CSS3약간의 애니메이션을 위해.
HTML
마크업은 간단하고 유연합니다. 우리는 만듭니다 DIV수업과 함께 시계, DIV수업과 함께 날짜, 날짜와 시간, 분, 초를 포함하는 정렬되지 않은 목록을 표시합니다.
CSS
약간의 애니메이션이 있는 스타일:
컨테이너(너비: 960px; 여백: 0 자동; 오버플로: 숨김;) .clock(너비:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; ) #Date ( font- 제품군: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( width:800px; margin:0 auto; padding:0px; list- style:none; text-align:center; ) ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( 위치:상대적; -moz-animation:mymove 1s 이즈 무한; -webkit-animation:mymove 1s 이즈 무한; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( 0%(불투명도:1.0; 텍스트 그림자:0 0 20픽셀 #00c6ff;) 50%(불투명도:0; 텍스트 그림자:없음; ) 100%(불투명도:1.0; 텍스트 그림자:0 0 20픽셀 #00c6ff; ) ) @-moz-keyframes mymove ( 0% (불투명도:1.0; text-shadow:0 20px #00c6ff;) 50% (불투명도:0; 텍스트 그림자: 없음; ) 100% (불투명도:1.0; 텍스트 그림자 :0 0 20px #00c6ff; ) )
JS
우리는 연결 제이쿼리도서관
그리고 우리의 스크립트
- 새로운 날짜()- 새로운 객체를 생성 날짜의미를 가지고 현재 날짜컴퓨터 브라우저의 현재 시간.
- 날짜 설정()- 메서드는 해당 월의 날짜(1~31), 현지 시간을 설정합니다.
- getDate()- 메서드는 현지 시간에 따라 지정된 날짜의 날짜(1~31일)를 반환합니다.
- getSeconds(), getMinutes()그리고 getHours()- 이 방법을 사용하면 브라우저에서 현재 시간의 초, 분 및 시간을 검색할 수 있습니다.
- (초< 10 ? "0" : "") + seconds) - 초(분 및 시간) 값에 선행 0을 추가합니다. 기호 ? 그리고 : 삼항( 세 개 한 벌) 운영자. 콜론 앞의 조건이 콜론 앞의 값을 반환하는 특수 연산자입니다. 의문 (? ) 오른쪽 ( 진실) 또는 다음 값 콜론조건이 거짓인 경우( 거짓).
- 기능 세트간격- 표준이다 자바스크립트부분이 아닌 기능 제이쿼리. 일정한 간격(밀리초)으로 코드를 여러 번 실행합니다.
이것은 JavaScript의 시스템 시간을 일반 텍스트로 표시하는 간단한 스크립트입니다. 콜론으로 구분된 시, 분, 초 - 그게 전부입니다.
자신만의 시계 스타일을 설정하려면 ID – #time 으로 블록의 스타일을 정의하면 됩니다. CSS에서 시계의 글꼴, 색상 및 크기를 설정할 수 있습니다. 간단한 시계가 아니라 더 복잡한 시계가 필요한 경우 사이트의 Flash 시계를 살펴보십시오. 스크립트는 어디에서 시간 데이터를 가져옵니까? 표시된 시간은 정확히 장치에 설정된 시간입니다.
설치
시계를 보고 싶은 사이트의 위치에 다음 코드를 붙여넣으세요. 예를 들어 uCoz에서는 "Top" 또는 "Bottom of the site"가 될 수 있습니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
스크립트는 설치한 위치에 시계가 있는 한 줄의 텍스트가 즉시 표시됩니다. 예를 들어, "00:00:00". 그런데 초, 분, 시간은 항상 두 자리 숫자이므로 값 변경이 원활합니다.