[HTML] 프로그래스바 구현

 

progress  태그는 html5 부터 사용 가능합니다.

 

  [html]
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  
  <h1>프로그래스바</h1>
  <progress id="time" max="30" value="30"></progress>
  <p>최대값 30 / 초당 1이 감소하게 하였고<br>
    0이하로 감소하면 다시 30으로 증가하게 하였음</p>

  [javascript]
  time = $('#time').val();
     $(document).ready(function(){

        setInterval(function(){
            time--;
            $('#time').val(time);
            if(time<0){
              time = 30;
            }
        },1000);
       

     });

 

 

See the Pen progress by 윤재현 (@jh91) on CodePen.