종이 한장 차이...

jquery progressbar by button event(버튼에 의한 진행율 표시) 본문

javascript

jquery progressbar by button event(버튼에 의한 진행율 표시)

graykang 2022. 11. 8. 16:59
728x90
반응형
SMALL

# +,- 버튼에 의한 jquery progressbar 예제.

예를 들어 특정 숫자까지 합을 구하는 데 있어 버튼 클릭 시 합의 기준값까지의 계산 상태를 가시화 할 때 사용.

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
  <meta charset="utf-8">
  <title>jQuery UI 버튼에 의한 진행표시（Progressbar)</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
  <script>
  $(function() {
    var base = 1000;//기준값
    var price = 100;//단위값
    var totalSum = 0;//계산값
    //progressbar 초기설정.
      $( "#progressbar" ).progressbar({
        value: totalSum
      });
    //마이너스버튼 클릭 이벤트
    $('.mmm').on('click',function(){
      if(totalSum > 0){
        totalSum = totalSum - price;
        $( "#progressbar" ).progressbar({
          value: (totalSum /base)*100
        });
      }
    });
    //플러스 버튼 클릭 이벤트
    $('.ppp').on('click',function(){
      totalSum = totalSum + price;
      console.log((totalSum/base)*100);
      $( "#progressbar" ).progressbar({
        value: (totalSum /base)*100
      });
    });
  });

  </script>
</head>
<body>
    <div id="progressbar"></div>
    <button class="mmm">-</button>
    <button class="ppp">+</button>
</body>
</html>

 

# 결과 화면:

728x90
반응형
LIST
저작자표시 (새창열림)

'javascript' 카테고리의 다른 글

브라우저의 뒤로가기 버튼 이벤트 케치 Back Forward Cache  (0) 2023.01.25
ajax+post+csrf+spring+security  (0) 2023.01.06
jquery+ checkbox selected control by radio button+ 라디오 버튼에 의한 체크박스 컨트롤 하기  (0) 2022.11.04
javascript+jquery+submit+loading 로딩중 표시 하기  (0) 2022.11.01
jquery+javascript 전화번호 자동완성 및 유효성검사  (0) 2022.10.28
'javascript' Related Articles more
Comments