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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Simple countdown timer

    Ok, I have been trying for the last week to get my head around this javascript thing to create myself a countdown timer. And after many search keywords in whatever search engine I still couldn't find any good results which could meet my needs. I actually found a cute little script here on the forum, but unfortunately, and after many times trying, couldn't make it work for me as well. Yes it did what it was supposed to do, but I need something more specific.

    So here's the thing. I am working with PHP variables and need two countdown timers on one page. I have altered the script in various ways, and it kinda works, but whenever it starts running, the top countdown timer starts with the correct amount of seconds but then jumps to the same output as the below one.

    Code:
    <span id = \"closingtimer". $target ."\">". $seconds ."</span>
    
    <script type=\"text/javascript\">
     var seconds = ". $seconds .";
    					 
     function display". $target ."() { 
      seconds --;
      if (seconds < 1) {
        closeMyAd();
      } else {
        document.getElementById( \"closingtimer". $target ."\" ).innerHTML = seconds ;
        setTimeout(\"display". $target ."()\", 1000);
      }
     }
    					
    display". $target ."();
    </script>
    $target is a variable from the Db
    $seconds is the amount of seconds

    The script IS in a loop to be able to perform the function twice for the two different targets with their amount of seconds. Due to this (I suspect) the timer is counting down at 2 seconds at a time, which also is quite annoying

    Target 1 has 2400 seconds and target 2 has 1600 seconds.

    How can I make this work correctly and without having a huge script in the middle of my page?
    Last edited by Foofah; 08-31-2010 at 08:12 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Maybe you can get a clue from this ?

    Code:
    <html>
    <head>
    </head>
    <body>
    Click the numbers to start timer
    <div id="timer1" onclick="startCountDown(this);onclick=''">30</div>
    <div id="timer2" onclick="startCountDown(this);onclick=''"">60</div>
    </body>
    <script>
    startCountDown=function(el){
    	this.el = el;
    	new function(){ 		
    		setInterval(function (){el.innerHTML = el.innerHTML - 1},1000);		
    }	}
    
    </script>
    </html>

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <span id ="tst1" >10</span>
    <span id ="tst2" >10</span>
    <script type="text/javascript">
    
    function CountDown(id,sec) {
    document.Show.Show0.value=vic++;
     this.obj=document.getElementById(id);
     this.sec=sec;
     this.count();
    }
    
    CountDown.prototype.count=function(){
     this.sec--;
     if (this.sec<1) {
      alert('');
     }
     else {
      this.obj.innerHTML = this.sec;
      var oop=this;
      setTimeout(function(){ oop.count(); }, 1000);
     }
    }
    
    new CountDown('tst1',20);
    new CountDown('tst2',10);
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, the first suggestion works DaveyErwin, but I don't want my users to have to click on the timer, it should automatically start when they open the page. And, if possible, have the clock stop at 0 instead going into a minus.

    The second example from vwphillips is not working at all for me. I just made a testpage and copied the example in it and checked it online, it sticks at 10 seconds.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <span id ="tst1" >10</span>
    <span id ="tst2" >10</span>
    <script type="text/javascript">
    
    function CountDown(id,sec) {
     this.obj=document.getElementById(id);
     this.sec=sec;
     this.count();
    }
    
    CountDown.prototype.count=function(){
     this.sec--;
     if (this.sec<1) {
    //  alert('');
     }
     else {
      this.obj.innerHTML = this.sec;
      var oop=this;
      setTimeout(function(){ oop.count(); }, 1000);
     }
    }
    
    new CountDown('tst1',20);
    new CountDown('tst2',10);
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Foofah (08-31-2010)

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <html>
    <head>
    </head>
    <body>
    <div id="timer1" >3</div>
    <div id="timer2" >6</div>
    </body>
    <script>
    startCountDown=function(el){
    	this.el = el;
    	new function(){ 
                if(el.innerHTML > 0){		
    		setInterval(function (){
                                    if(el.innerHTML == 0){el.innerHTML = 'TimeOut'}
    				if(el.innerHTML == "TimeOut"){}else{
    				el.innerHTML = el.innerHTML - 1;
    				}},1000);}}}
    startCountDown(document.getElementById('timer1'))
    startCountDown(document.getElementById('timer2'))
    </script>
    </html>

  • Users who have thanked DaveyErwin for this post:

    Foofah (08-31-2010)

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function initCountDown(nCounter,nCount,nRef){
    
    		nRef = 0;
    		for (i=0; i<nCount.length; i++)
    			{
    			 nRef += nCount[i];	
    			 nCounter[i].firstChild.data = nCount[i];
    			 if (nCount[i] > 0)
    				{
    				 nCount[i]--;
    				}			  
    			}
    		if (nRef != 0)
    			{
    			 setTimeout
    				(
    			 	 function()
    					{
    				 	 initCountDown(nCounter,nCount,nRef);
    					}
    		 	 	 , 1000
    				);
    			}						
    	}
    	
    	function init(){
    
    		var nRef = 0;
    		var nCounter = [];
    		var nCount = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "timer_display")
    				{
    				 nCounter[nCounter.length] = nDiv[i];
    				 nCount[nCount.length] = nDiv[i].title;
    				}
    			}	
    		initCountDown(nCounter,nCount,nRef);
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #fffacd; margin-top: 60px;}
    	.timer_display {font-famiy: arial; font-size: 12pt; width: 125px; height: 20px; text-align: center;
    			margin-bottom: 15px; margin-left: auto; margin-right: auto; background-color: #f0fff0;}
    </style>
    </head>
    	<body>
    		
    		<div title="2400" class="timer_display">Timer Disabled</div>
    
    		<div title="1600" class="timer_display">Timer Disabled</div>		
                  
    	</body>
    </html>
    Last edited by Sciliano; 08-31-2010 at 10:11 PM.

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    In addition to invalid markup, invalid script tags and invalid placement of the script tags, the following creates TWO intervals that never stop. setInterval runs every interval until clearInterval is called.

    It is therefore useless.

    JavaScript has only one place, in the <head>, anywhere else is invalid.

    Any use of document.write() is invalid.

    Quote Originally Posted by DaveyErwin View Post
    Code:
    <html>
    <head>
    </head>
    <body>
    <div id="timer1" >3</div>
    <div id="timer2" >6</div>
    </body>
    <script>
    startCountDown=function(el){
    	this.el = el;
    	new function(){ 
                if(el.innerHTML > 0){		
    		setInterval(function (){
                                    if(el.innerHTML == 0){el.innerHTML = 'TimeOut'}
    				if(el.innerHTML == "TimeOut"){}else{
    				el.innerHTML = el.innerHTML - 1;
    				}},1000);}}}
    startCountDown(document.getElementById('timer1'))
    startCountDown(document.getElementById('timer2'))
    </script>
    </html>
    Last edited by Sciliano; 08-31-2010 at 10:12 PM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    JavaScript has only one place, in the <head>, anywhere else is invalid.
    Gee, then, all those HTML pages that use JavaScript's document.write() to dynamically generate HTML as the page is being created don't work. Millions of URLs are totally invalid. The internet grinds to a halt.

    [Okay, I know you were speaking theoretically. In practice, of course, all current browsers tend to support putting <script> tags almost any place you want them. Almost.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Sciliano View Post
    In addition to invalid markup, invalid script tags and invalid placement of the script tags, the following creates TWO intervals that never stop. setInterval runs every interval until clearInterval is called.

    It is therefore useless.

    JavaScript has only one place, in the <head>, anywhere else is invalid.

    Any use of document.write() is invalid.
    What , never stop? Well of course they stop!
    Do you think every one who has ran this still
    has timers running on their machines ?
    Did you run it? Are there timers still running
    on your machine? Of course not!
    Splain to me how they run forever.
    This works in Every Browser.
    Tell me a browser where this fails.
    Useless ? It's use is a countdown timer.
    Useless to whom ? I find it very useful.
    Does it fail for you? Of course not!
    Maybe a little green , eh ?

  • #11
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Put an alert in it. It's useless.

    It's a waste of resources, poorly written with invalid code and markup.

    Anyone who adopts it, could do much better for themselves by finding an alternative which uses valid markup and unobtrusive code -- my post, for example.
    Code:
    <html>
    <head>
    </head>
    <body>
    <div id="timer1" >3</div>
    <div id="timer2" >6</div>
    </body>
    <script>
    startCountDown=function(el){
    	this.el = el;
    	new function(){ 
                if(el.innerHTML > 0){		
    		setInterval(function (){
                                    alert('still running');
                                    if(el.innerHTML == 0){el.innerHTML = 'TimeOut'}
    				if(el.innerHTML == "TimeOut"){}else{
    				el.innerHTML = el.innerHTML - 1;
    				}},1000);}}}
    startCountDown(document.getElementById('timer1'))
    startCountDown(document.getElementById('timer2'))
    </script>
    </html>

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Sciliano View Post
    Put an alert in it. It's useless.

    It's a waste of resources, poorly written with invalid code and markup.

    Anyone who adopts it, could do much better for themselves by finding an alternative which uses valid markup and unobtrusive code -- my post, for example.

    No, I will not put an alert in it. Alerts are Very bad form.
    I will be glad to give you a list of alternatives if you need that.
    I do agree with you that putting an alert in it would render it useless.
    The same can be said for any page utilizing javascript animations.

    I want to here more about waste of resources please.

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    The alert proves that it's "still running," after both counts have reached zero.

    Stunning that you needed that explained to you.

    Bad form? Your entire post is bad form, poor practice.

    JavaScript has only one place, inside the <head>, anywhere else is very, very poor practice.

    You used invalid markup, that's very, very poor practice.
    Last edited by Sciliano; 08-31-2010 at 11:23 PM.

  • #14
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    The alert proves that it's "still running." Stunning that you needed that explained to you.
    setInterval() does NOT stop until you clear it so of course it's still gonna run.

  • #15
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Sciliano View Post
    The alert proves that it's "still running." Stunning that you needed that explained to you.

    Bad form? Your entire post is bad form, poor practice.

    JavaScript has only one place, inside the <head>, anywhere else is very, very poor practice.

    You used invalid markup, that's very, very poor practice.
    It is most definitly not running on my machine, and i feel it's
    safe to say it is not running on your machine. I do so enjoy
    being stunning.
    Now please explain to me about these resources that you have wasted.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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