염장 타이머 « Codebreaker

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>

Codebreaker 2bc08752a0894eb2c7afb345286e391d

염장 타이머

Enjoy this article?

Leave a comment

Tags

Recent Comments

Categories