jQuery UI 프로그레스바 타이머 2

1 개요

JQuery UI 프로그레스바 타이머 2

예제: http://jmnote.com/jqui/progressbar-timer2.php

2 소스 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery UI 프로그레스바 타이머</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<style>
#progressbar1 {
  height: 23px;
  width: 400px;
}
#progressbar1 .ui-progressbar-value {
  margin-top: -23px;
}
#progressbar1 span.caption {
  display: block;
  text-align: center;
}
</style>
<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>
<script>
var total_time = 5000;
var current_time = 0;
var refresh_interval = 50;
var timer;

function refresh_bar() {
	percentage = 100 * current_time / total_time;
	// console.log(percent);
	$( "#progressbar1" ).progressbar({ value: percentage })
		.children('span.caption')
		.html(percentage.toPrecision(3) + ' %');
	current_time += refresh_interval;
	if(current_time > total_time) clearInterval( timer );
}

$(function() {
	timer = setInterval( refresh_bar, refresh_interval );
	refresh_bar();
});
</script>
</head>
<body>

<div id="progressbar1"><span class="caption"></span></div>

</body>
</html>

3 같이 보기

jQuery UI 프로그레스바 타이머 1

4 참고 자료

http://stackoverflow.com/questions/1476542/display-value-in-jqueryui-progressbar