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

最新推荐文章于 2024-10-10 09:56:47 发布

weixin_30371875

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量144

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/moonfans/archive/2013/03/28/2986056.html

版权

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;
width:40px;
height:40px;
position:absolute;
top:0px;
left:0px;
}
#button{
width:60%;
height:20%;
margin:0 auto;

}

</style>
</head>

<body>
<div id="block">
</div>
<div id="button">
<input type="button" οnclick="javascript:refressPos();" value="submit"/>
<input type="button" οnclick="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