昨天的例子是针对只有单个函数运行的结果，但是实际中可能会有多组函数这样同时进行，那么这个时候就要对函数进行封装传参，来实现效果了。就还拿昨天的例子来说吧，昨天写的例子实现的效果是点击按钮，让div向前移动，那么今天就扩展一下，点击按钮让div向后移动，想要实现这个效果，就必须要传参了，来看代码：
css代码
<style>
#box{width:50px;height:50px;background:#ff6b0e;position: absolute;top:50px;left:50px;}
</style>
html代码
</head>
<body>
<input id="btn1" type="button" value="向前"/>
<input id="btn2" type="button" value="向后"/>
<div id="box"></div>
</body>
那么js实现是这样的：
<script>
//兼容不同浏览器获取行间样式
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
window.onload=function(){
var aBtn1=document.getElementById("btn1");
var aBtn2=document.getElementById("btn2");
var oBox=document.getElementById("box");
aBtn1.onclick=function(){
fn(oBox,18,500)
};
aBtn2.onclick=function(){
fn(oBox,-18,10)
};
//以上参数的区别是dir一个大于0，一个小于0，所以下面可以针对符号做判断
//大于和小于这些符号是不能当参数被传的
function fn(obj,dir,target){
clearInterval(obj.timer);//这里先要清除一下定时器是为了防止一直点击按钮，div一直加速
//开启定时器,假定让其等于500的时候，停止下来
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,"left")) + dir;
if( speed > target && dir>0){//这里要做判断大于目标数并且dir为大于0的数
speed = target
}
if( speed < target && dir<0){//这里要做判断小于目标数并且dir为小于0的数
speed = target
}
obj.style.left= speed +"px";
if( speed == target){
clearInterval(timer)
}
},50)
}
};
</script>
其实这个例子是很简单的，但是需要注意的细节是符号是不能向参数一样被传的，所以就要做判断，因为有大量相同的代码。那么就把共通的可以专门提出来卸载函数里，然后将可变化的值设定为参数来传递即可。这是比较通俗的说法，当然可能用语上会不太准确，但是能明白就行，也欢迎大神指出！
好了，今天就这样了！
时间： 2024-10-08 10:42:12