javascript中使用定时函数实现移动的方块

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#block{
background-color:#FF0000;
40px;
height:40px;
position:absolute;
top:0px;
left:0px;
}
#button{
60%;
height:20%;
margin:0 auto;

}

</style>
</head>

<body>
<div id="block">
</div>
<div id="button">
<input type="button" onclick="javascript:refressPos();" value="submit"/>
<input type="button" onclick="javascript:complete();" value="restart"/>
</div>
<script type="text/javascript">
var i=0;
var timer;

function setPosition(position){
document.getElementById("block").style.top=position+"px";
document.getElementById("block").style.left=position+"px";
}
function refressPos(){
if(i<1000){
setPosition(i);
i++;
timer=setTimeout("refressPos()",10);

}else{
clearTimeout(timer);

}

setTimeout 延时器
参数：
function 需要延迟执行的方法或指向该方法的引用变量
time 要延迟的时间，单位毫秒
特点：
在达到指定的延迟时间后，执行一次指定的方法，非递归使用时，不会以指定时间为间隔重复执行；
用法：
只执行一次：
var func = function() {alert('It's show time !')};
var timer_timeout = setTimeout(func, 1000);//在一秒后执行

按固定时间间隔执行：
var timer_timeout = null;
var func = function() {
    alert('Hi !');
    timer_timeout = setTimeout(func, 1000);
};
func();

clearTimeout 清除延时器
参数
timer_id 指向延时器的引用变量，如上面的timer_timeout;
用法：
        var timer = null;
	var i = 0;
	var func = function() {
		i ++;
		if(i > 10) { //i大于10时，清除延时器，停止递归
			clearTimeout(timer);
			alert(i);
		} else {
			timer = setTimeout(func,1000);
		}
	};
	
	func();

setInterval 定时器
参数：与setTimeout相同
特点：以传入的时间为间隔，不需要递归，即可多次调用传入的方法
用法：
var func = function() {
alert('每隔一秒出现一次');
};
var timer_interval = setInterval(func,1000);

clearInterval 清除定时器
参数：与clearTimeout相同
用法：
        var timer = null;
	var i = 0;
	var func = function() {
		i ++;
		if(i > 10) {
			clearInterval(timer);
			alert(i);
		}
	};
	
	timer = setInterval(func,1000