잠시만 기다려 주세요

     '이태원 150명 넘게 죽은 핼러윈 참사.. 오세훈 탄핵.. 윤석열 탄핵.... 행안부 장관 이상민은 사람이냐... 말만 하면 책임 회피..'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (16)  |  여러가지 팁 (1059)  |  추천 및 재미 (156)  |  자료실 (22)  |  
시사, 이슈, 칼럼, 평론, 비평 (613)  |  끄적거림 (136)  |  문예 창작 (716)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!


    javascript/jquery

javascript/jquery - CSS3 회전 속성과 javascript를 활용한 아날로그 시계
이 름 : 바다아이   |   조회수 : 10205         짧은 주소 : 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 , . 바다아이 7107
75 javascript/jquery , . , 바다아이 5300
74 javascript/jquery javascript , ... 바다아이 7040
73 javascript/jquery , cookie class 바다아이 7619
72 javascript/jquery select 3 바다아이 8596
71 javascript/jquery , ... 바다아이 7974
70 javascript/jquery , timezone, , ... moment.js 바다아이 10192
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 10241
68 javascript/jquery (block) , ... 바다아이 8355
67 javascript/jquery textarea cursor , , focus 바다아이 11502
66 javascript/jquery jquery ajax option .... 바다아이 8632
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 8398
64 javascript/jquery javascript , , , , () 바다아이 9270
63 javascript/jquery javascript (date ) 바다아이 9425
현재글 javascript/jquery CSS3 javascript 바다아이 10206
61 javascript/jquery javascript , cookie, , , , , 바다아이 9471
60 javascript/jquery javascript 바다아이 10078
59 javascript/jquery javascript / , , , 바다아이 13298
58 javascript/jquery url , , encode, decode ... 바다아이 8564
57 javascript/jquery javascript ... frame location.href 바다아이 14106
56 javascript/jquery File Upload Progress, .... . 바다아이 9018
55 javascript/jquery javascript, json , json Highlight 바다아이 9164
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 10477
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 9233
52 javascript/jquery javascript entity , , encode, decode 바다아이 9428
51 javascript/jquery javascript post, get , 바다아이 10730
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 9527
49 javascript/jquery jquery autocomplete , , . 바다아이 9105
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 10086
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 9352
| |









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