函数是指一段在一起的、可以做某一件事儿的程序。也叫做子程序、(OOP中)方法。
案例：移动元素，封装动画函数
1.div要移动,要脱离文档流---position:absolute
2.如果样式的代码是在style的标签中设置,外面是获取不到
3.如果样式的代码是在style的属性设置,外面是可以获取
4.获取div的当前位置
console.log(my$("dv").offsetLeft);
动画函数animate封装
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>title</title>
<style>
*{
margin:0;
padding:0;
}
input{
margin-top:20px;
}
div{
margin-top:30px;
width:200px;
height:100px;
background-color:pink;
position:absolute;
}
</style>
</head>
<body>
<inputtype="button"value="移动到400px"id="btn1"/>
<inputtype="button"value="移动到800px"id="btn2"/>
<divid="dv"></div>
<scriptsrc="common.js"></script>
<script>
//点击第一个按钮，移动到400px
my$("btn1").onclick=function(){
animate(my$("dv"),400);
};
//点击第二个按钮，移动到800px
my$("btn2").onclick=function(){
animate(my$("dv"),800);
};
//动画函数animate封装
functionanimate(element,target){
//先清理定时器
clearInterval(element.timeId);
//一会要清理定时器（只产生一个定时器）
element.timeId=setInterval(function(){
//获取div当前位置
varcurrent=element.offsetLeft;//数字类型，没有px
//div每移动多少像素---步数
varstep=10;
step=current<target?step:-step;
//每次移动后的距离
current+=step;
//判断当前移动后的位置，是否达到目标位置
if(Math.abs(target-current)>Math.abs(step)){
element.style.left=current+"px";
}else{
//清理定时器
clearInterval(element.timeId);
element.style.left=target+"px";
}
},20);
}
</script>
</body>
</html>
一个较大的程序一般应分为若干个程序块，每一个模块用来实现一个特定的功能。所有的高级语言中都有子程序这个概念，用子程序实现模块的功能。在C语言中，子程序的作用是由一个主函数和若干个函数构成。由主函数调用其他函数，其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。
