原生JS DOM 重点知识笔记（第六期-js动画）

一、延迟定时函数：setTimeout（）

1. setTimeout能够让函数在一段时间后执行

setTimeout(function(){这里是内容},1000)//在1000毫秒之后执行函数
var fun=function(){
	alert("定时");
}
setTimeout("fun",1000);

二、取消控制函数clearTimeout（）

1. 最好用一个变量来存储延迟函数

var movment=setTimeout("function",1000);
//可以用下面的方法来取消定时
clearTimeout(movement);

三、提取数值

提取一个值的数字部分，比如获取width/height等属性的值

alert(ParseInt("39px"));
//将输出39，然后可以对数值进行相加减等操作。

四、js动画（移动）

<div style="position:absolute;top:0px;left:0px;" id="message">
	这里是内容 
</div>

这是一个定位在左上角的内容，我们通过js来实现移动到位置top：200px.left:200px;的动画

var movement=setTimeout("moveMessage()",10);
funtion moveMessage(){
	if(!document.getElementById)
		return false;//判断浏览器是否支持此属性
	if(!document.getElementById("message"))
		return false;//判断是否存在此id
	var ele document.getElementById("message");
	var xpos=parseInt(elem.style.left);
	var ypos=parseInt(elem.style.top);
	if(xpos==200&&ypos==100)
		return true;//到达目的地
	if(xpos<200)
		xpos++;
	if(xpos>200)
		xpos--;
	if(ypos<200)
		ypos++;
	if(ypos>200)
		ypos--;
	elem.style.left=xpos+'ps';//样式实现
	elem.style.top=ypos+'ps';//样式实现
	movement=setTimeout("moveMessage()",10);//每10毫秒移动一次 
}