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"
"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.
at

2 comments:

  1. DrewSep 6, 2008, 1:46:00 AM

    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 }

    ReplyDelete
  2. leorickSep 6, 2008, 12:09:00 PM

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

    ReplyDelete