11Jan/091
염장 타이머
오랜만의 한국어 포스팅입니다.
오늘은 혼자이신 분들을 가슴아프게 하는 타이머를 하나 공개해볼까 합니다. 만든지도 거의 1년이 다 되어가네요. 아래의 스크린샷을 클릭하면 실제 작동되는 타이머를 볼 수 있습니다.
jQuery 는 여기서 구할 수 있습니다. 사실 아래의 코드를 구동하는데 jQuery 가 꼭 필요한 것은 아닙니다. 그냥 평소에 쓰던게 편해서 쓴것일 뿐. document.getElementByName(), element.innerHTML 정도만 직접 작성해주면 jQuery 없이도 구현할 수 있습니다.
new Date('Feb 14, 2008 21:31:47');
이 부분을 특별한 날(?)의 날짜와 시간을 집어넣으면, 그 시간부터 지금까지 얼마나 지났는지 보여주는 간단한 타이머입니다. 저야 여자친구와 사귀기 시작한 날을 집어넣었습니다만, 사실 꼭 그럴 필요는 없겠지요. 미래의 날짜를 넣어도 되는데, 이 경우엔 카운트다운이 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>xenia.sumin.us</title>
<style type="text/css">
div#content {
position: absolute;
top: 50%;
width: 98%;
margin-top: -25pt;
font-family: sans-serif;
font-size: 50pt;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
var offset = new Date('Feb 14, 2008 21:31:47');
var curr = new Date();
var diff = parseInt((curr.getTime() - offset.getTime()) / 1000);
function update() {
var time = diff < 0 ? -diff : diff;
var sec = time % 60;
time = parseInt(time / 60);
var min = time % 60;
time = parseInt(time / 60);
var hours = time % 24;
time = parseInt(time / 24);
var days = time;
if(sec < 10) sec = '0'+sec;
if(min < 10) min = '0'+min;
if(hours < 10) hours = '0'+hours;
$('#content').text(days+' days '+hours+':'+min+':'+sec);
diff++;
}
setInterval(update, 1000);
</script>
</head>
<body onload="update()">
<div id="content"></div>
</body>
</html>