<!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
}
function complete(){
i=0;
}
</script>
</body>
</html>