먼저 시계가 출력되는 위치를 잡자.
<body>
<div id="wrap">
<h3>아날로그시계</h3>
<div id="clock"> <!-- 시계 전체 원형 이미지 -->
<div id="hour" class="hand"></div> <!--시 이미지-->
<div id="min" class="hand"></div> <!--분 이미지-->
<div id="sec" class="hand"></div> <!--초 이미지-->
</div>
</div>
</body>
그리고 CSS를 통해 시계와 시곗바늘 이미지를 추가하고 여러 효과를 주자
<style>
#wrap {
width:600px;
height:600px;
position: fixed;
left:50%;
top:50%;
margin:-300px 0 0 -300px;
font-family: bon,sans-serif;
}
#wrap h3 {
height: 80px;
font-size:50px;
text-align: center;
line-height: 80px;
font-weight: 700;
color:#424242;
}
/*1)CSS추가 : 시계 전체 원형 이미지 출력*/
#clock {
width: 500px;
height: 500px;
background: url(../images/Clock-face.png);
background-size: 100% 100%;
margin: auto;
position: relative;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/* 2)CSS추가 : 시분초 이미지 출력 */
#hour { background: url(../images/hour_hand.png); }
#min { background: url(../images/minute_hand.png); }
#sec { background: url(../images/second_hand.png); }
/* 3)CSS추가 : 시분초 이미지가 출력되는 위치 지정 */
.hand {width: 500px; height: 500px; position: absolute; left: 0; top: 0;}
</style>
이제 시곗바늘을 움직여볼 차례다.
<script>
showtime(); //최초 함수 호출
function showtime(){
let now = moment(); //moment.js 시작
let hour = now.hour();
let min = now.minute();
let sec = now.second();
//4) 초, 분, 시 이미지 각도 꺽기 (한바퀴 360도)
$("#sec").css("transform", "rotate("+(sec*6)+"deg)"); //360도/60초
$("#min") .css("transform", "rotate("+((min*6)+(sec*0.1))+"deg)");
$("#hour").css("transform", "rotate("+(30*hour+0.5*min)+"deg)");
}//showtime() end
//5) 1초마다 주기적 또는 반복적으로 함수 호출
setInterval(showtime, 1000);
</script>초침은 1초에 한 칸인 6도씩 움직이지만 분침과 시침은 초와 분이 흐름에 따라 계속해서 움직인다.
분침의 경우 60초가 1분이고 그동안 1칸 사이를 조금씩 움직이기 때문에 60초 동안 1칸인 6도를 더 움직이게 하면 된다.
시침의 경우 1시간에 30도를 움직여야 하기 때문에 60분 동안 30도를 더 움직이기 하기 위해 1분에 0.5도씩 더 움직이게 하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>13_아날로그시계.html</title>
<script src="jquery-3.6.1.min.js"></script>
<script src="moment-with-locales.js"></script>
<style>
#wrap {
width:600px;
height:600px;
position: fixed;
left:50%;
top:50%;
margin:-300px 0 0 -300px;
font-family: bon,sans-serif;
}
#wrap h3 {
height: 80px;
font-size:50px;
text-align: center;
line-height: 80px;
font-weight: 700;
color:#424242;
}
/*1)CSS추가 : 시계 전체 원형 이미지 출력*/
#clock {
width: 500px;
height: 500px;
background: url(../images/Clock-face.png);
background-size: 100% 100%;
margin: auto;
position: relative;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/* 2)CSS추가 : 시분초 이미지 출력 */
#hour { background: url(../images/hour_hand.png); }
#min { background: url(../images/minute_hand.png); }
#sec { background: url(../images/second_hand.png); }
/* 3)CSS추가 : 시분초 이미지가 출력되는 위치 지정 */
.hand {width: 500px; height: 500px; position: absolute; left: 0; top: 0;}
</style>
</head>
<body>
<div id="wrap">
<h3>아날로그시계</h3>
<div id="clock"> <!-- 시계 전체 원형 이미지 -->
<div id="hour" class="hand"></div> <!--시 이미지-->
<div id="min" class="hand"></div> <!--분 이미지-->
<div id="sec" class="hand"></div> <!--초 이미지-->
</div>
</div>
<script>
showtime(); //최초 함수 호출
function showtime(){
let now = moment(); //moment.js 시작
let hour = now.hour();
let min = now.minute();
let sec = now.second();
//4) 초, 분, 시 이미지 각도 꺽기 (한바퀴 360도)
$("#sec").css("transform", "rotate("+(sec*6)+"deg)"); //360도/60초
$("#min") .css("transform", "rotate("+((min*6)+(sec*0.1))+"deg)");
$("#hour").css("transform", "rotate("+(30*hour+0.5*min)+"deg)");
}//showtime() end
//5) 1초마다 주기적 또는 반복적으로 함수 호출
setInterval(showtime, 1000);
</script>
</body>
</html>
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [44일] jQuery (15) - 스크롤 이동 (0) | 2022.09.28 |
|---|---|
| [44일] jQuery (14) - offset과 position (0) | 2022.09.28 |
| [43일] jQuery (11) - moment (0) | 2022.09.27 |
| [43일] jQuery (10) - addClass (0) | 2022.09.27 |
| [43일] jQuery (9) - 요소 탐색 (0) | 2022.09.27 |
