jQuery UI 프로그레스바 타이머

1 개요[ | ]

jQuery UI progressbar timer V1
jQuery UI 프로그레스바 타이머

2 소스 코드[ | ]

  • total_time 은 5000 ms (5초)
프로그레스바가 0%에서 시작하여 100%가 되기까지의 시간
  • 프로그레스바 갱신주기는 50 ms
html
Copy
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<div id="progressbar1"></div>

<script>
var total_time = 5000;
var current_time = 0;
var refresh_interval = 50;
var timer;

function refresh_bar() {
  $( "#progressbar1" ).progressbar({ value: current_time });
  current_time += refresh_interval;
  if(current_time > total_time) clearInterval( timer );
}

$(function() {
  $( "#progressbar1" ).progressbar({ max: total_time, value: current_time });
  timer = setInterval( refresh_bar, refresh_interval );
});
</script>

3 같이 보기[ | ]