JQUERY-아날로그 시계

임재헌·2023년 3월 31일
JQUERY

목록 보기
14/16
<!DOCTYPE html>   
<html lang="ko"> 
<head>
    <meta charset="UTF-8">
<title>14_아날로그 시계</title> 
<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: darkkhaki;
    }

/* 1.시계 이미지 추가하기 */
#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, 24),0 17px 50px 0 rgba(0, 0, 0, 19);
}

/* 2.시분초 이미지 출력 */
#hour{background: url(../images/hour_hand.png);}
#min{background: url(../images/minute_hand.png);}
#sec{background: url(../images/second_hand.png);}
.hand{
    width: 500px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;

}
/* 3.시분초 이미지가 출력되는 위치 지정 */
</style>
<!-- jquery import -->
<script src="jquery-3.6.4.min.js"></script>  
<script src="moment-with-locales.min.js"></script> 
</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>
    runtime();//최초 함수 호출

function runtime(){
//alert();
let now=moment();
let hour=now.hour();
let min=now.minute();
let sec=now.second();
//4. 시, 분, 초 이미지 각도꺽기 한바퀴 360
// 360도/60초   360도/60분  360도/12시간
// $("#sec").css("transform", "rotate("+(sec* 6) +"deg)");
// $("#min").css("transform", "rotate("+(min* 6) +"deg)");
// $("#hour").css("transform", "rotate("+(hour* 30) +"deg)");
  
//6.시침(hour hand)이 시간이 지나면서
//같이 따라 움직이도록 설정
$("#sec").css("transform", "rotate("+(sec* 6) +"deg)");
$("#min").css("transform", "rotate("+((min* 6)+0.1*sec) +"deg)");
$("#hour").css("transform", "rotate("+((hour* 30)+0.5*min) +"deg)");
}
//5. 1초마다 주기적으로 반복적으로 함수를 호출
setInterval(runtime,1000);
</script>
</body>
</html>
임재헌
이전 포스트
JQUERY-Offset()

다음 포스트
JQUERY-아날로그 시계

JQUERY

JQUERY-Offset()

JQUERY-스크롤 이동

0개의 댓글
