BootStrap과 moment를 이용해 웹 페이지에 아날로그 시계 제작하기

BootStrap과 moment를 이용해 해당 웹페이지에 2번째 container 태그 안에 아날로그 시계를 만들어 보겠다.

사용자의 환경에 맞게 동적으로 변하는 웹페이지

 

일단 웹페이지에 동작할 css 파일과 아날로그 시계에 동작할 css 파일, 시계를 동작시킬 js 파일을 따로 만든다.

외부 라이브러리를 이용한 간단한 기능 구현 게시판에 아날로그 시계 게시글을 참고해주길 바란다.

 

myWebIntro.css

0.00MB

analogClock.css

0.00MB

analogClock.js

0.00MB

 

각각의 파일은 참고용으로 첨부해놨으니 본인 입맛에 맞게 바꿔서 사용하면 된다.

 

이제 두번 째 컨테이너에 시계를 출력하기 위해 간단한 html으로 뼈대를 제작해보자

<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
  <div class="row">
    <div class="col-xs-12">
        <!-- 본문의 시작-->
          <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><!--col-xs-12 end-->
  </div><!--row end--> 
</div>

 

이렇게 뼈대를 잡아주고 다시 html 페이지를 출력하면 짜잔! 해당 컨테이너 안에서 동작하는 시계가 완성이 된다.

이미지가 깨져서 상태가 이상하지만 잘 동작한다.

 

해당 방법처럼 이미지 파일을 사용하지 않고 아날로그 시계를 구현할 방법도 있는데 이러한 방법도 있으니 참고하길 바란다.  일단 시계를 출력할 뼈대를 만든다.

<div class="clock">
  <div class="hand hour" id="hour-hand"></div>
  <div class="hand minute" id="minute-hand"></div>
  <div class="hand second" id="second-hand"></div>
</div>

 

그 다음 CSS를 추가해서 간단한 디자인을 해준다

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 50%;
  margin: 20px auto;
  background: white;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  background: black;
}

.hour {
  width: 7px;
  height: 50px;
  margin-left: -3.5px;
}

.minute {
  width: 5px;
  height: 70px;
  margin-left: -2.5px;
}

.second {
  width: 2px;
  height: 90px;
  margin-left: -1px;
  background: red;
}

 

이제 시계의 시침, 분침, 초침을 동작하게 할 함수를 구현해준다.

 

<script>
  $(document).ready(function() {
    function updateClock() {
      const now = new Date();
      const second = now.getSeconds();
      const minute = now.getMinutes();
      const hour = now.getHours();

      const secondAngle = second * 6; // 360 degrees / 60 seconds
      const minuteAngle = (minute * 6) + (second * 0.1); // 360 degrees / 60 minutes + second increment
      const hourAngle = (hour * 30) + (minute * 0.5); // 360 degrees / 12 hours + minute increment

      $('#hour-hand').css('transform', `rotate(${hourAngle}deg)`);
      $('#minute-hand').css('transform', `rotate(${minuteAngle}deg)`);
      $('#second-hand').css('transform', `rotate(${secondAngle}deg)`);
    }

    setInterval(updateClock, 1000);
    updateClock(); // Initialize the clock immediately
  });
</script>

 

이렇게 스크립트안에 코드까지 추가해주면 짜잔! 이렇게 동작하는 시계도 추가할 수 있다.

 

오직 css만으로 디자인한 시계다.