Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Countdown adding a leading zero

    Dear members,

    I'm using a countdown script based on Jquery, but when the hours and seconds are less then 10, the script only display's one number.
    I wan't the script to add a leading zero, but i tried a lot of things but it is not working.

    So when the time is 04:06, the script display's: 4:6
    But it has to display 04:06

    How can this be done?

    Code:
    <div id="time">
    
    <script>
    function counter(futureDate) {
    var today = new Date(); // today
    count = Math.floor((futureDate-today)/1000);
    countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
    alert("time's up");
    clearInterval(countdown);
    }
    count--;
    }, 1000);
    }
    
    counter(new Date(2012,8,09)); // May 8, 2012 00:00:00
    /* counter(new Date(2012,4,8,15,49,10)); // May 8, 2012 15:49:00 */
    </script>
    
    <span class="last"><p id="h">#</p></span><span class="point">:</span><span class="minute last"><p id="m">#</p></span>
    
    <div class="uurminuut">hours</div>
    <div class="uurminuut">minutes</div>
    
    </div>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,247
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Not possible with your script as adding a leading zero changes the number to a string. Use this instead:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    var timeInSecs;
    var ticker;
    var BigDay;
    
    function startTimer(BigDay){
    var today = new Date();
    timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
    if (timeInSecs < 0) {
    document.getElementById("countdown").innerHTML = "The scheduled date/time "  + BigDay + " has now passed";
    return false;
    }
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    document.getElementById("countdown").innerHTML = "The scheduled date/time "  + BigDay + " has now passed";
    }
    
    var days = Math.floor(secs/86400);
    secs %= 86400;
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    
    var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
                      + ":" + ( (secs < 10) ? "0" : "" ) + secs;
    result = days + " Days: " + result;
    document.getElementById("countdown").innerHTML = "Time remaining until 5th December 2012 18:00 UTC= " + result;
    }
    
    </script>
    
    </head>
    
    <body onload = "startTimer( new Date('December 5, 2012 18:00:00 UTC'))">
    
    <span id="countdown" style="font-weight: bold;"></span>
    
    </body>
    </html>
    "I have never taken any exercise except sleeping and resting." - Mark Twain, US humorist, novelist, short story author, & wit (1835 - 1910)

    "I was so inspired by the Olympics that I sold my bicycle and bought a bigger television" - Philip M
    Last edited by Philip M; 08-09-2012 at 10:26 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Philip,

    but i now modified the script you gave me to what i need, but with your script i have this problem:

    The countdown has to be displayed like this:

    <span class="last">MINUTES</span>
    <span class="point">:</span>
    <span class="minute last">SECONDS</span>

    But with the script you gave me, i can't split the minutes from the seconds.
    Is there a way to do that?




    Modified script:

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    var timeInSecs;
    var ticker;
    var BigDay;
    
    function startTimer(BigDay){
    var today = new Date();
    timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
    if (timeInSecs < 0) {
    document.getElementById("countdown").innerHTML = "The scheduled date/time "  + BigDay + " has now passed";
    return false;
    }
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    document.getElementById("countdown").innerHTML = "The scheduled date/time "  + BigDay + " has now passed";
    }
    
    var days = Math.floor(secs/86400);
    secs %= 86400;
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    
    var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins;
    document.getElementById("countdown").innerHTML = result;
    }
    
    </script>
    
    </head>
    
    <body onload = "startTimer( new Date('December 5, 2012 18:00:00 UTC'))">
    
    <span id="countdown"></span>
    
    </body>
    </html>




    UPDATE


    Did it myself, wasn't that difficult, for the people who are interested how i did it:

    Code:
    <script type = "text/javascript">
    
    var timeInSecs;
    var ticker;
    var BigDay;
    
    function startTimer(BigDay){
    var today = new Date();
    timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
    if (timeInSecs < 0) {
    document.getElementById("countdown").innerHTML = "The scheduled date/time "  + BigDay + " has now passed";
    return false;
    }
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    document.getElementById("countdown").innerHTML = "The scheduled date/time "  + BigDay + " has now passed";
    }
    
    var days = Math.floor(secs/86400);
    secs %= 86400;
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    
    var result = ((hours < 10 ) ? "0" : "" ) + hours;
    var result2 = ":" 
    var result3 = ((mins < 10) ? "0" : "" ) + mins;
    document.getElementById("tijd").innerHTML = "<span class='last'>" + result + "</span><span class='point'>:</span><span class='minute last'>" + result3 + "</span>";
    }
    
    </script>
    Last edited by icecube87; 08-09-2012 at 10:57 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •