JavaScript, jQuery 막대그래프 타이머

1 개요

jQuery, JavaScript 막대그래프 타이머

• 예제: http://zetawiki.com/ex/jquery/bar-timer.php

2 소스 코드

<style type="text/css">
#bar {
  background-color: white;
  width: 40px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
#bar_core {
  background-color: red;
  width: 40px;
  height: 200px;
  position: relative;
}
#digit {
  width: 40px;
  text-align: center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="bar">
	<div id="bar_core"></div>
</div>
<input type="text" id="digit" value="" />
<script>
function toMMSS(sec_num) {
  var minutes = Math.floor(sec_num / 60);
  var seconds = sec_num - (minutes * 60);
  if ( minutes < 10 ) minutes = "0" + minutes;
  if ( seconds < 10 ) seconds = "0" + seconds;
  return minutes+':'+seconds;
}
function refresh_timer(){
  $("#bar_core")
	  .height( Math.ceil(height*(remain_time/total_time))+"px")
	  .offset({ top: origin_pos.top + height*((total_time-remain_time)/total_time), left: origin_pos.left });
  $("#digit").val( toMMSS(remain_time) );
  if(remain_time < 1) clearInterval( timer );
  remain_time--;
}

var height = 200;
var total_time = 480;
var remain_time = total_time;
var origin_pos = $("#bar_core").offset();

refresh_timer();
var timer = setInterval(refresh_timer, 100); // 1000으로 수정해야 함. (그렇지 않으면 10배 빠름...)
</script>

3 같이 보기

• 타이머