JavaScript countdown from 3... 2... 1... ? :D

i-CONICA
i-CONICA used Ask the Experts™
on
Hi,

I need a really simple (simplier the better) way to show a JS countdown from 3.
It's for a "download will begin in 3 seconds" Where I'd like the 3 to animate down to 0.

Thanks. :)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Check this code
<head>
<script LANGUAGE="JavaScript">

var seconds=3;

ID=window.setTimeout("update();",0);

function update() {
	document.form1.seconds.value = seconds;

	if (seconds>0){
		ID=window.setTimeout("update();",1000);
	} else {
	 	document.form1.seconds.value = 'Finish';
	}

	seconds=seconds-1;
}

</script>
</head>
<body>

<form name="form1">
Seconds <input type="text" name="seconds" value="0" size="7">
</form>

</body>
</html>

Open in new window

<script type="text/javascript">
var x = 4;

function startClock(){
if(x!=='Done'){
x = x-1;
document.getElementById('IDclock').innerHTML = x;
setTimeout("startClock()", 1000);
}
if(x==0){
x='Done';
document.getElementById('IDclock').innerHTML = 'Download....';
}
}
</script>
<body onload="startClock()">
<div id="IDclock"> </div>

Commented:

<html>
<script type="text/javascript">
var current_count= 3;

function countDown() {
            var countVal = "";
     if ( current_count >= 0 ) {
               countVal = "<h1> download in " + current_count + " sec.</h1>";
               current_count--;
             }
     else {
       clearInterval(countJob);
        countVal = "<h1> downloading...</h1>";
     }
            document.getElementById("countContainer").innerHTML = countVal;
}

var countJob = setInterval("countDown()", 1000);
</script>

<body>
<div id="countContainer"> <h1> download in </h1></div>
</body>
</html>

Open in new window

Commented:
The launch function below allows you to specify a function to call at the end of the count-down, the number of seconds to start the count at, and the element to output the current count to:

<html xmlns="http://www.w3.org/1999/xhtml">
<head title="Launcher Test">
<script language="javascript" type="text/javascript">
function launch(fn, cnt, el) {
    document.getElementById(el).innerText = cnt--;
      if (cnt >= 0) {
            setTimeout('launch(\''+fn+'\', '+cnt+',\''+el+ '\')', 1000);
      } else {
            eval(fn);
      }
}

function liftoff() {
    alert('we have lift off!');
}
</script>
</head>
<body>
<div>
<input type="button" value="Click me to launch!" onclick="launch('liftoff()',3,'count');" />
</div>
<div>Launching in...<span id="count">.</span></div>
</body>
</html>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial