Prindol

DESIGN, HTML5, CSS3, DOM, Jquery, JSON, Actionscript2/3, Linux, IIS

You are not logged in.

#1 2012-08-30 13:34:17

skydown
Administrator
Registered: 2011-07-25
Posts: 315

[JAVASCRIPT] D-Day

<script type="text/javascript">
function getTime() {
    now = new Date();
    dday = new Date("9 10 2012 00:00:00"); //구하고자하는날
    days = (dday - now) / 1000 / 60 / 60 / 24;
    daysRound = Math.floor(days);
    hours = (dday - now) / 1000 / 60 / 60 - (24 * daysRound);
    hoursRound = Math.floor(hours);
    minutes = (dday - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
    minutesRound = Math.floor(minutes);
    seconds = (dday - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
    secondsRound = Math.round(seconds);

    if(daysRound < 10) daysRound = '0' + daysRound;
    if(hoursRound < 10) hoursRound = '0' + hoursRound;
    if(minutesRound < 10) minutesRound = '0' + minutesRound;
    if(secondsRound < 10) secondsRound = '0' + secondsRound;

    d = '<span class=\"d' + String(daysRound)[0] + '\">'+ String(daysRound)[0] + '</'+'span>';
    d = d + '<span class=\"d' + String(daysRound)[1] + '\">'+ String(daysRound)[1] + '</'+'span>';

    h = '<span class=\"n' + String(hoursRound)[0] + '\">'+ String(hoursRound)[0] + '</'+'span>';
    h = h + '<span class=\"n' + String(hoursRound)[1] + '\">'+ String(hoursRound)[1] + '</'+'span>';

    m = '<span class=\"n' + String(minutesRound)[0] + '\">'+ String(minutesRound)[0] + '</'+'span>';
    m = m + '<span class=\"n' + String(minutesRound)[1] + '\">'+ String(minutesRound)[1] + '</'+'span>';

    s = '<span class=\"n' + String(secondsRound)[0] + '\">'+ String(secondsRound)[0] + '</'+'span>';
    s = s + '<span class=\"n' + String(secondsRound)[1] + '\">'+ String(secondsRound)[1] + '</'+'span>';

    document.getElementById('day').innerHTML = d;
    document.getElementById('hour').innerHTML = h;
    document.getElementById('minute').innerHTML = m;
    document.getElementById('second').innerHTML = s;
    newtime = window.setTimeout("getTime();", 1000);
    
    if(daysRound > 0) {
        document.getElementById('dday').style.display = 'block';
        document.getElementById('counter').style.display = 'none';
    } else {
        document.getElementById('dday').style.display = 'none';
        document.getElementById('counter').style.display = 'block';
    }
}
window.onload = function() {
    getTime();
}
</script>
        <div class="counter" id="counter">
            <span class="num" id="hour">
                <span class="n0">0</span>
                <span class="n0">0</span>
            </span>
            <span class="colon" id="colon1">
                <span class="on">:</span>
            </span>
            <span class="num" id="minute">
                <span class="n0">0</span>
                <span class="n0">0</span>
            </span>
            <span class="colon" id="colon2">
                <span class="on">:</span>
            </span>
            <span class="num" id="second">
                <span class="n0">0</span>
                <span class="n0">0</span>
            </span>
            <p class="txt6"><img src="http://image.career.co.kr/noblealba/event/2012/teaser/teaser_time.gif" alt="" /></p>
        </div>

        <div class="dday" id="dday">
            <span class="d">
                <span>D - </span>
            </span>
            <span class="num" id="day">
                <span class="d0">0</span>
                <span class="d0">0</span>
            </span>
        </div>

D-day 당일 이전 남은 일수 표시, 당일 시간으로 표시

Offline

Board footer

Powered by FluxBB