Something that I'd like to share with you!

Tuesday, January 15, 2008

Simple Javascript + Meta Refresh Auto-Refresh with Countdown

2 comments :
Below are the example of a simple auto-refresh webpage using meta refresh and javascript. Meta refresh is a method of instructing a browser to automatically refresh the web page with a given time (second). While javascript is used to make the counter running.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="refresh" content="10" />
</head>
<body>
<h2>Auto-Refresh in <span id="CDTimer">???</span> secs.</h2>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var TimerVal = 10;
var TimerSPan = document.getElementById("CDTimer");
function CountDown(){
   setTimeout( "CountDown()", 1000 );
   TimerSPan.innerHTML=TimerVal;
   TimerVal=TimerVal-1;
   if (TimerVal<0) { TimerVal=0 } //improvement by vivalibre, tq } CountDown() /*]]>*/ </script> </body> </html>

Just make sure both bold value is same, 10 for example.

2 comments :

vivalibre said...

I'd suggest a small improvement. Because DNS lookups on a redirect to another site sometimes are tardy, the counter can go below 0. The user should not see values of negative seconds. After the line

  TimerVal=TimerVal-1;

I'd suggest

 &nbspif (TimerVal<0) { TimerVal=0 }

LeorickSimon said...

Thanks for your feedback. I've added it to the code. Never thought that it can go negative since I'm testing it locally.