Something that I'd like to share with you!

Tuesday, January 15, 2008

Simple Javascript + Meta Refresh Auto-Refresh with Countdown

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"
<html xmlns="">
<meta http-equiv="refresh" content="10" />
<h2>Auto-Refresh in <span id="CDTimer">???</span> secs.</h2>
<script language="JavaScript" type="text/javascript">
var TimerVal = 10;
var TimerSPan = document.getElementById("CDTimer");
function CountDown(){
   setTimeout( "CountDown()", 1000 );
   if (TimerVal<0) { TimerVal=0 } //improvement by vivalibre, tq } CountDown() /*]]>*/ </script> </body> </html>

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


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


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.