잠시만 기다려 주세요

     '시장이나 돌면서 가짜 민생 외치는 이재명을 규탄한다. 싸우지 않을 거면 내려와라... 야당대표는 당신의 방탄이나 하는 자리가 아니다.'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (16)  |  여러가지 팁 (1059)  |  추천 및 재미 (156)  |  자료실 (22)  |  
시사, 이슈, 칼럼, 평론, 비평 (613)  |  끄적거림 (136)  |  문예 창작 (716)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!

    javascript/jquery

javascript/jquery - CSS3 회전 속성과 javascript를 활용한 아날로그 시계
이 름 : 바다아이   |   조회수 : 10202         짧은 주소 : https://www.bada-ie.com/su/?101591830365
출처 : http://webskills.kr/archives/304







혹시 해서 그림 4개 첨부해 놓습니다.
적당히 저장 후 경로 바꿔서 사용하세요...


이 예제는 css3의 변환(transform)효과 속성을 활용하여 이미지의 회전 값에 변화를 줌으로써 아날로그 형태의 시계를 표현하는 것이다.
이 예제를 통해서 자바스크립트에서 시간을 다루고 css 속성을 변경하는 방법에 대해 익혀보자. IE의 경우 이 예제는 버전 9부터 작동한다.




 


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>clock</title>
  <style>
	#clock { position:relative;width:300px;height:300px; }
	#clock img { position:absolute;top:0;left:0; }
	#digital { width:300px; height:20px; text-align:center; }
	}
  </style>
 </head>
 <body>
	<div id="clock">
		<img src="http://images.webskills.kr/etc/clock.png">
		<img id="hour" src="http://images.webskills.kr/etc/h.png">
		<img id="munite" src="http://images.webskills.kr/etc/m.png">
		<img id="second" src="http://images.webskills.kr/etc/s.png">
	</div>
	<div id="digital"></div>
	<script>
		function digital() 
		{
			var d = new Date(); /* d = 현재 시간 */
			var h = d.getHours(); /* h = 시간 */
			var m = d.getMinutes(); /* m = 분 */
			var s = d.getSeconds(); /* s = 초 */
			
			/* 시간을 12시간 단위로 하기 위해 12보다 큰 경우 12를 빼줌 */
			if( h > 12 ) h = h - 12; 
			
			var dh = ( h * 30 ) + ( m / 2 ); /* dh = 시침의 각도 */
			dh = parseInt( dh ); /* 시침의 각도를 정수형으로 변환 */
			var dm = m * 6; /* 분침의 각도 */
			var ds = s * 6; /* 초침의 각도 */
 
			/* 시침, 분침, 초침의 각도를 계산한 값으로 변경 */
			/* IE 10+, Firefox */
			document.getElementById("hour").style.transform = "rotate(" + dh + "deg)";
			document.getElementById("munite").style.transform = "rotate(" + dm + "deg)";
			document.getElementById("second").style.transform = "rotate(" + ds + "deg)";
			
			/* IE 9 */
			document.getElementById("hour").style.MsTransform = "rotate(" + dh + "deg)";
			document.getElementById("munite").style.MsTransform = "rotate(" + dm + "deg)";
			document.getElementById("second").style.MsTransform = "rotate(" + ds + "deg)";
			
			/* Opera, Chrome, Safari */
			document.getElementById("hour").style.WebkitTransform = "rotate(" + dh + "deg)";
			document.getElementById("munite").style.WebkitTransform = "rotate(" + dm + "deg)";
			document.getElementById("second").style.WebkitTransform = "rotate(" + ds + "deg)";
 
			document.getElementById("digital").innerHTML = h + ":" + m + ":" + s;
			
		}
 
		//매 1초마다 함수 digital()을 호출하도록 타이머 생성
		var timer = setInterval( function(){ digital(); }, 1000);
	</script>
 </body>
</html>
| |





      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
76 javascript/jquery 스크롤해도 상단에 고정되는 메뉴 만들기, 스크롤 상단에 레이어 고정. 바다아이 7101
75 javascript/jquery 자바스크립트 스크롤을 문서 화면 상단, 하단으로 이동하기. 스크롤을 시작, 끝으로 이동하기 바다아이 5297
74 javascript/jquery javascript 서버시간 가져오기, 서버날짜 가져오기... 바다아이 7034
73 javascript/jquery 자바스크립트 쿠키 클래스, cookie class 바다아이 7616
72 javascript/jquery select 박스 3단 카테고리 바다아이 8589
71 javascript/jquery 자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기... 바다아이 7969
70 javascript/jquery 자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js 바다아이 10185
69 javascript/jquery textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기... 바다아이 10238
68 javascript/jquery 마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기... 바다아이 8349
67 javascript/jquery textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus 바다아이 11499
66 javascript/jquery jquery ajax option 옵션 총 정리.... 바다아이 8628
65 javascript/jquery jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제 바다아이 8395
64 javascript/jquery javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림) 바다아이 9262
63 javascript/jquery javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체) 바다아이 9421
현재글 javascript/jquery CSS3 회전 속성과 javascript를 활용한 아날로그 시계 바다아이 10203
61 javascript/jquery javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기 바다아이 9468
60 javascript/jquery javascript 자바스크립트 날짜 계산하는 다양한 방법 바다아이 10075
59 javascript/jquery 자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어 바다아이 13291
58 javascript/jquery url 인코드, 디코드, encode, decode 예제... 바다아이 8563
57 javascript/jquery javascript 자바스크립트 프레임 페이지 이동... frame location.href 바다아이 14104
56 javascript/jquery File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현. 바다아이 9014
55 javascript/jquery 자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight 바다아이 9159
54 javascript/jquery 자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환 바다아이 10471
53 javascript/jquery 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점... 바다아이 9230
52 javascript/jquery 자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode 바다아이 9424
51 javascript/jquery 자바스크립트 javascript post, get 값 파라미터 받기, 구하기 바다아이 10727
50 javascript/jquery 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click 바다아이 9522
49 javascript/jquery jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제. 바다아이 9099
48 javascript/jquery 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete 바다아이 10085
47 javascript/jquery 자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) 바다아이 9351
1
2
3
| |









Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천  실행시간 : 0.18822 초
to webmaster... gogo sea. gogo sea.