How do I display a countdown timer on my webpage?

Discussion in 'Programming' started by MindReality, Oct 24, 2011.

  1. #1
    I would like to put a countdown timer on my webpage which starts from 60 to 0 seconds.

    What is the code to implement that? It is a html webpage btw.

    Most of the codes I find have a target date.

    I do not wish to use a target date.

    I just wish to have the timer start counting down from 60 to 0 seconds once the page is loaded, and have that decreasing number displayed real time.
     
    Solved! View solution.
    MindReality, Oct 24, 2011 IP
  2. #2
    "once the page is loaded" says Javascript.

    
    var timer = 60;
    function countDown() {
      document.getElementById('t').innerHTML = timer-- + ' seconds left';
      if(timer == 0) {
        //return or do whatever you want once the time has run down to 0
      }
      setTimeout("[I]countDown()[/I]",[I]1000[/I]);
    }
    
    <body onload="countDown();>
    ...
    <div id="t"></div>
    
    Code (markup):
     
    Rukbat, Oct 24, 2011 IP
  3. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #3
    Where do I post the top part of the code? Before or after the head tag?

    Does the code display the number 60 and start decreasing it to 0 on the webpage?
     
    MindReality, Oct 24, 2011 IP
  4. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #4
    1) The Javascript goes wherever you have <script></script> tags. The body tag Javascript goes in your existing body tag.

    2) Yes - in the div with the id of "t". Put that wherever you want the "x seconds left" (or whatever text you want to use) to appear.
     
    Rukbat, Oct 24, 2011 IP
  5. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #5

    Attached Files:

    MindReality, Oct 24, 2011 IP
  6. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #6
    I managed to make it work.

    But how do I make it the same font as my words? And how do I make it fit in the middle of a sentence instead of in a new paragraph?
     
    MindReality, Oct 24, 2011 IP
  7. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #7
    Never mind, I managed to find out how to get this done, thanks!
     
    MindReality, Oct 24, 2011 IP