SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Countdown

  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Countdown

    Hello,

    I am a beginner to javascript. I would like to count down on my webpage from 5 to 0. Changing a real time counter every second.

    Do I do something like I would in PHP?

    as in...:
    Code:
    function countdown(){
        $i=5;
        while($i!=0){
            echo $i;
            //*1000 for each second... 
            $i--;    
        }
    }

    Thanks!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess it would look something like:

    <script type="text/javascript">
    i = 0
    while (i <= 5)
    {
    document.write("The number is " + i)
    document.write("<br>")
    i++
    }
    </script>
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming that a countdown starts at 5 and goes down to 0:
    Code:
    var iCounter = 5;
    
    function countDown() {
        if(iCounter < 0) {
            window.clearInterval(iTimer);
            return;
        }
    
        alert("Number is " + iCounter);
    
        iCounter--;
    }
    
    var iTimer = window.setInterval(countDown, 1000);

  4. #4
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd rather use timeout
    Code:
    <script>
    function countDown(n) {
    	if(n > 0) {
    		document.getElementById('count').innerHTML = n;
    		setTimeout(function() { countDown(n - 1) }, 1000)
    	}
    }
    onload = function() { countDown(5) }
    </script>
    <div id=count></div>

  5. #5
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What causes it to show up on the screen and change dynamically?

    I have used document.write... but it hangs on Number is 5 and the page continues to load.

    Code:
    <script language="JavaScript">
    var iCounter = 5;
    function countDown() {
        if (iCounter < 0) {
            window.clearInterval(iTimer);
            return;
        }
        document.write("Number is " + iCounter);
        iCounter--;
    }
    var iTimer = window.setInterval(countDown, 1000);
    </script>
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  6. #6
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there an advantage to one or the other?

    Cross-browser? etc...
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only use document.write on the "initial" load of the page. You will basically write a new document if you use document.write afterwards. Use innerHTML like stereofrog showed or use the DOM to manipulate whatever element.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    buildakicker,
    I tried it with while loop. But It don't do.
    Code:
     
    <html>
    <head>
    </head>
    <body>
    
    <div id="buildakicker" style="font-size:35px; color:blue;"></div>
    
    <script type="text/javascript">
    
    var number = 5;
    
    function countDown(){
    
    var e = document.getElementById('buildakicker');
    
    e.innerHTML= number ;
    
    var b = setTimeout("countDown()",1000) ;
    
    number--  ;
    
    if(number < 0) {clearTimeout(b) ;}
    
    }
    
    countDown();
    
    </script>
    
    </body>
    </html>

  9. #9
    SitePoint Addict cranjled's Avatar
    Join Date
    Apr 2004
    Location
    ny
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for that. I've been trying to get this for some time. Is there an elegant way to make that display in minutes/seconds? Since this closely resembles the goal I'm trying to achieve, I thought I'd ask before pulling anymore hair out. =)

    What I'm trying to do is print the countdown textually in the forms:

    There are 3 minutes and 0 seconds left.
    There are 5 minutes and 1 second left.
    There are 1 minute and 28 seconds left.
    There are 32 seconds left.
    alert('Done');

    Thanks for a really good basecode and for taking a look at this!

    =)

    Cranjled

    Quote Originally Posted by stereofrog View Post
    I'd rather use timeout
    Code:
    <script>
    function countDown(n) {
    	if(n > 0) {
    		document.getElementById('count').innerHTML = n;
    		setTimeout(function() { countDown(n - 1) }, 1000)
    	}
    }
    onload = function() { countDown(5) }
    </script>
    <div id=count></div>

  10. #10
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, try this

    Code:
    function countDown(n) {
    	if(n > 0) {
    		var mins = Math.floor(n / 60);
    		var secs = n &#37; 60;
    
    		var text = "There are ";
    
    		if(mins == 1)
    			text += "1 minute and ";
    		if(mins > 1)
    			text += mins + " minutes and ";
    		if(secs == 1)
    			text += "1 second";
    		else
    			text += secs + " seconds";
    		text += " left";
    
    		document.getElementById('count').innerHTML = text;
    		setTimeout(function() { countDown(n - 1) }, 1000)
    	}
    }


Bookmarks

Posting Permissions

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