Hi guys,

I want to make a countdown timer. I've seen loads of scripts for these on various sites but when I build them, they never work how I want (if at all!) so I thought, hopefully with your help, I'd build my own!

Here is my HTML...
Code:
<div class="countdownTimer">

    <div class="dashWeeks">
        <div class="dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
            <span class="division">Weeks</span>
        </div>
    </div>

    <div class="dashDays">
        <div class="dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
            <span class="division">Days</span>
        </div>
    </div>

    <div class="dashHours">
        <div class="dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
            <span class="division">Hours</span>
        </div>
    </div>

    <div class="dashMinutes">
        <div class="dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
            <span class="division">Minutes</span>
        </div>
    </div>

</div>

...and here is my stylesheet...


Code:
.countdownTimer {width:249px; height:63px; background-image:url(assets/images/countdown/countdownBg.png); position:relative; font-family:Arial, Helvetica, sans-serif;}
.dashWeeks {margin:0 0 0 34px; padding:10px 0 0; float:left; position:relative;}
.dashDays {margin:0 0 0 10px; padding:10px 0 0; float:left; position:relative;}
.dashHours {margin:0 0 0 10px; padding:10px 0 0; float:left; position:relative;}
.dashMinutes {margin:0 0 0 10px; padding:10px 0 0; float:left; position:relative;}
.dash {width:37px; height:33px; background-image:url(assets/images/countdown/dashBg.png); background-repeat:no-repeat;}
.digit {width:12px; height:22px; color:#FFFFFF; font-size:20px; line-height:20px; text-align:center; float:left; display:block; padding:6px 0 0 4px;}
.division {width:37px; font-size:9px; text-transform:uppercase; text-align:center; color:#AAAAAA; clear:both; position:absolute; top:40px; left:0;}
I take it I'm going to need Javascript but how would I make it so each digit of my timer fits in the 'digit' div? I was hoping to add a Javascript (and maybe jQuery?) and then just change the date it counts down to each time - is that possible?

Thank you and hope to hear from you!

SM