...

View Full Version : Resolved Simple countdown timer



Foofah
08-31-2010, 11:22 AM
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.



<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?

DaveyErwin
08-31-2010, 02:58 PM
Maybe you can get a clue from this ?


<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>

vwphillips
08-31-2010, 03:04 PM
<!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>

Foofah
08-31-2010, 03:38 PM
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. :confused:

vwphillips
08-31-2010, 04:05 PM
<!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>

DaveyErwin
08-31-2010, 04:22 PM
<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>

Sciliano
08-31-2010, 05:54 PM
<!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>

Sciliano
08-31-2010, 08:53 PM
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.



<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>

Old Pedant
08-31-2010, 09:10 PM
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.]

DaveyErwin
08-31-2010, 09:43 PM
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 ?

Sciliano
08-31-2010, 10:00 PM
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.



<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>

DaveyErwin
08-31-2010, 10:07 PM
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.

Sciliano
08-31-2010, 10:20 PM
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.

codebyter
08-31-2010, 10:23 PM
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.

DaveyErwin
08-31-2010, 10:26 PM
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.

DaveyErwin
08-31-2010, 10:32 PM
setInterval() does NOT stop until you clear it so of course it's still gonna run.

Yes, it does stop.

DaveyErwin
08-31-2010, 10:35 PM
setInterval() does NOT stop until you clear it so of course it's still gonna run.

Yes, it does stop.




Maybe a little green, eh?

codebyter
08-31-2010, 10:54 PM
Yes, it does stop.




Maybe a little green, eh?

lol no it doesnt dude. go look it up if u need proof. setTimeout stops, setInterval executes something every interval of seconds until page reload or the interval is cleared.

DaveyErwin
08-31-2010, 10:58 PM
lol no it doesnt dude. go look it up if u need proof. setTimeout stops, setInterval executes something every interval of seconds until page reload or the interval is cleared.

It has stopped on my machine and surely it has stopped on yours also.
Are you saying that right now (your time) ii's still running and you are
still dissmissing the alert ? Not so!

Also I will ask you to explain the waste of resource.

this is my sig ...

Maybe a little green , eh.

Old Pedant
09-01-2010, 12:35 AM
*SIGH*

Okay, if you do


<script>
setInterval("alert('tick')", 3000);
</script>

and then, when the alert appears, you just ignore it, indeed the *effects* of setInterval are stopped...or at least paused.

That's because JavaScript runs single-threaded. So while it is waiting for you to dismiss the alert(), *nothing* else in JS code will continue to run. Including setInterval.

But if you dismiss the alert, and if the interval specified has already elapsed, you will *immediately* get the next alert (it doesn't wait another 3 seconds, in the example code above).

But that is *NOT* the same as stopping/cancelling a setInterval. That is just pausing the *effects* of the setInterval while it waits for you to respond to the alert().

Again, as soon as you respond to the alert, the interval picks right up.

[This is one reason that the most common idiom for displaying an "elapsed seconds" clock can get way far off in some circumstances.]

It *IS* true that there is another way of stopping the setInterval: Change the window to another page. JavaScript never survives beyond the life of the page it is running on. Somehow, I don't think anybody ever meant that setInterval survived page changes. If you took it that way, you were likely the only one who did.

Yooslo
09-01-2010, 01:05 AM
Can anyone help me with a simple button counter?

Old Pedant
09-01-2010, 01:25 AM
Yes, if you will ask in a new thread.

Do NOT ask non-related questions in an existing thread.

Sciliano
09-01-2010, 12:22 PM
The inserted alert, highlighted below, continues to open, even after both counters reach zero. Therefore this so-called code continues to occupy the browser and CPU, wasting their resources, after the purpose of this so-called code has been met.

GIGO.

Visitors who are considering adopting this code should think again. Find an alternative which uses valid markup and unobtrusive JavaScript, as shown in my code, posted earlier.

JavaScript has no place other than inside the <head>. Any other placement of it is a very, very poor practice indicative of a poorly written document.

Originally posted by DaveyErwin:

<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>

DaveyErwin
09-01-2010, 12:38 PM
The inserted alert, highlighted below, continues to open, even after both counters reach zero. Therefore this so-called code continues to occupy the browser and CPU, wasting their resources, after the purpose of this so-called code has been met.

GIGO.

Visitors who are considering adopting this code should think again. Find an alternative which uses valid markup and unobtrusive JavaScript, as shown in my code, posted earlier.

JavaScript has no place other than inside the <head>. Any other placement of it is a very, very poor practice indicative of a poorly written document.


<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>


Please tell me how many resources are wasted , please.
Is it still running ?

Maybe a little green , eh?

Old Pedant
09-01-2010, 07:36 PM
Sciliano is theoretically 100% correct. But many of his answers don't reflect "real world" usage. He is harking toward a day in the future--which may or may not ever come--when browsers only support the "purity" of JavaScript.

Now, personally, I think that JavaScript is a hack language. And "purity" and JavaScript just don't go hand in hand. It's a scripting language that doesn't support many, many of the features you would want in a modern language (don't make me list them...the list is too long). It happens to work well in the browser environment, but I wouldn't rely on it for other, more serious, coding purposes. And to me, that means that if I can hack up a solution using it that works in all browsers, I'm happy. Whether my solution is theoretically correct or not, per Sciliano's terms.

HOWEVER...

In this case he is clearly correct that your code is badly broken.

Let me just give *ONE* example of how it is broken, by adding one thing to that page:


<html>
<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>
<br/><br/>
<a href="#" onclick="document.getElementById('timer1').innerHTML='*CLICKED*';return false;">
Click here to see the bug
</a>
</body>
</html>

Let the timers count down to zero and display "Time Out" and *THEN* click the link.

Enough said?

And, not so incidentally, proving that your setInterval() indeed continues until you change pages or kill the browser.

p.s.: And my code there clearly doesn't meet Sciliano's standards, as it has inline JavaScript in the <a> tag. A no-no. Sorry, but I'm going to continue to do that kind of stuff until browser makers outlaw it. It's just too much of a pain to have to attach events to simple tags for simple actions like that.

DaveyErwin
09-01-2010, 07:52 PM
Sciliano is theoretically 100% correct. But many of his answers don't reflect "real world" usage. He is harking toward a day in the future--which may or may not ever come--when browsers only support the "purity" of JavaScript.

Now, personally, I think that JavaScript is a hack language. And "purity" and JavaScript just don't go hand in hand. It's a scripting language that doesn't support many, many of the features you would want in a modern language (don't make me list them...the list is too long). It happens to work well in the browser environment, but I wouldn't rely on it for other, more serious, coding purposes. And to me, that means that if I can hack up a solution using it that works in all browsers, I'm happy. Whether my solution is theoretically correct or not, per Sciliano's terms.

HOWEVER...

In this case he is clearly correct that your code is badly broken.

Let me just give *ONE* example of how it is broken, by adding one thing to that page:


<html>
<body>
<div id="timer1" >3</div>
<div id="timer2" >6</div>
<div id="timer3" >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>
<br/><br/>
<a href="#" onclick="document.getElementById('timer3').innerHTML='*CLICKED*';return false;">
Click here to see the bug
</a>
</body>
</html>

Let the timers count down to zero and display "Time Out" and *THEN* click the link.

Enough said?

And, not so incidentally, proving that your setInterval() indeed continues until you change pages or kill the browser.

p.s.: And my code there clearly doesn't meet Sciliano's standards, as it has inline JavaScript in the <a> tag. A no-no. Sorry, but I'm going to continue to do that kind of stuff until browser makers outlaw it. It's just too much of a pain to have to attach events to simple tags for simple actions like that.

You have proved that the counter stops,
and not to worry , I have fixed your broken code.

Perhaps you would care to comment on wasted resources?

Old Pedant
09-01-2010, 08:07 PM
If you didn't understand the point of that post, then there's no point in my saying anything more.

I give up.

DaveyErwin
09-01-2010, 09:25 PM
if you didn't understand the point of that post, then there's no point in my saying anything more.

I give up.


:( :( :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum