[HTML] HP 체력바/칸 만들기 #2 (색깔 채우기)

728x90

저번 시간에는 버튼 클릭 시

진행 바(체력바)의 HP가 올라가는 코드를 작성해 보았습니다.

[HTML] HP 체력바/칸 만들기

HTML과 CSS 그리고 javascript / Jquery를 이용하여 진행바(체력 칸)를 만드는 방법을 알아보겠습니다. 체력바 칸 버튼 생성 먼저 HTML로 HP 칸을 표현할 버튼을 생성합니다. 부트스트랩 링크로 버튼의 CSS

bebeya.tistory.com

이번 시간에는 체력바의 칸의

색상이 변경되는 코드에 대해서 알아보겠습니다.

HTML 코드

버튼 클릭전에 보여줄 3개의 이미지를 만들고

버튼을 클릭후 보여줄 동일한 크기의 이미지 2개를 만들어줍니다.

    <button id="bt" type="button" class="btn btn-primary mt-5 S">시작</button>
    <Br>
    <a>HP</a>
     
    <!-- 버튼 클릭시 변경될 이미지 -->
    <img id="A"  class=" mt-5 front_hp1" src="img/HP.png"></img> 
    <img id="B"  class=" mt-5 front_hp2" src="img/HP.png"></img> 
    <img id="C"  class=" mt-5 front_hp3" src="img/HP.png"></img> 

    <!-- 버튼 클릭전 보여줄 이미지 -->
    <img id="btA"  class=" mt-5 bcak_hp1" src="img/HP2.png"></img> 
    <img id="btB"  class=" mt-5 bcak_hp2" src="img/HP2.png"></img> 
    <img id="btC"  class=" mt-5 bcak_hp3" src="img/HP2.png"></img>

스크립트 코드

먼저 제이쿼리를 사용하기 위해서 <head></head> 사이에 jQuery 링크를 추가해 주세요.

        <!-- https://code.jquery.com/ -->
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

시작 전 front_hp1~3 클래스를 숨기고 버튼 클릭 시

front_hp1이 사라지고 bcak_hp1이 보이도록 이벤트를 넣어주도록 합시다.

그리고 번호인 num이 4가 되면 모든 버튼이 사라지도록 구현합니다.

<script>
    var num = 1; //변수 선언
     $(".front_hp1").hide(); //클래스명 front_hp1을 숨깁니다.
     $(".front_hp2").hide(); //클래스명 front_hp2을 숨깁니다.
     $(".front_hp3").hide(); //클래스명 front_hp3을 숨깁니다.

      $("#bt").click(function(){ //ID가 bt인 버튼을 클릭시 이벤트
         next(); //함수 next를 실행
     });

     function next() { 
         if (num == 4) { //만약 num이 4가 되면 모든 버튼을 숨김
             $(".front_hp1").hide();
             $(".front_hp2").hide();
             $(".front_hp3").hide();
             $("#bt").hide();
         } else {
             $(".bcak_hp"+num).hide(); //class명 bcak_hp1 ~ bcak_hp3 까지를 num으로 변경하며 숨김
             $(".front_hp"+num).show(); //class명 front_hp1 ~ front_hp3 까지를 num으로 변경하며 보여줌
             num++; //num을 1증가
         }
     }
</script>