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.
Subscribe to:
Post Comments
(
Atom
)
Posts
2 comments :
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
 if (TimerVal<0) { TimerVal=0 }
Thanks for your feedback. I've added it to the code. Never thought that it can go negative since I'm testing it locally.
Post a Comment