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 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.