16
I am trying to have a function start with a timer and then switch to another function. However, it is not working at all. Anyone know whats goin on?
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="animation.js">
</script>
<script type="text/javascript" language="javascript">
function startnow () {
setContents ("counter",5);
var timer1= setTimeout("setContents('counter',4)",1000);
var timer2= setTimeout("setContents('counter',3)",2000);
var timer3= setTimeout("setContents('counter',2)",3000);
var timer4= setTimeout("setContents('counter',1)",4000);
var timer5= setTimeout("setContents('counter',0)",5000);
var timer6= setTimeout("setContents('counter', 'Go!')",6000);
var timer7= setTimeout("animation()",7000);
}
function setContents(id,val) {
document.getElementById(id).innerHTML = val;
}
function animation() {
/* return the x-coordinate of the layer named layername */
function getX(layername)
{
var theLayer = getElement(layername);
if (layerobject)
return(parseInt(theLayer.left));
else
return(parseInt(theLayer.style.left));
}
/* set animation speed and step */
var step = 3;
var framespeed = 35;
/* set animation boundaries */
var maxleft = 100;
var maxright = 600;
/* move left until boundary */
function left()
{
var currentX = getX('rightcar');
if (currentX > maxleft)
{
currentX-=step;
setX('rightcar',currentX);
move=setTimeout("left()",(1000/framespeed));
}
else
clearTimeout(move);
}
/* move right until boundary */
function right()
{
var currentX = getX('leftcar');
if (currentX < maxright)
{
currentX+=step;
setX('leftcar',currentX);
move=setTimeout("right()",(1000/framespeed));
}
else
clearTimeout(move);
}
}
</script>
</head>
<body>
<div id="counter" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 10px; font-family: Arial; font-size: 25px;">
</div>
<div id="explosion" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 300px;">
boom!
</div>
<div id="leftcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 10px; top: 300px;">
<img src="blue_car.gif" width="200" height="72" /></div>
<div id="rightcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 800px; top: 300px;">
<img src="yellow_car.gif" /></div>
<div id="controls" style="border: 1px solid black; width: 50px; height: 100px; position: absolute; left: 450px; top: 500px;">
<form action="" name="form" method="get" />
<input type="button" value="start" onclick="startnow();" />
<input type="button" value="reset" />
</form>
</div>
</body>
</html>[/HTML]
