今天寫(xiě)一個(gè)簡(jiǎn)單的小例子，需求：頁(yè)面有多個(gè)div，點(diǎn)擊屏幕，div有順序的依次下來(lái)。

來(lái)看js代碼：

<script>window.onload=function(){//第一步先追加多個(gè)divvar str="";var len=20;var aDiv=document.getElementsByTagName("div");var timer=null;var num=0;for(var i=0;i<len;i++){str+='<div style="width:50px;height:50px;background:#ff7e7e;position:absolute;left:'+i*60+'px;top:0;"></div>'}document.body.innerHTML=str;//添加點(diǎn)擊事件var onOff=true;document.onclick=function(){clearInterval(timer);timer=setInterval(function(){fn(aDiv[num],"top",18,500);num++;if(num===len){clearInterval(timer);}},100)};function fn(obj,attr,dir,target,endFn){clearInterval(obj.timer);//這里先要清除一下定時(shí)器是為了防止一直點(diǎn)擊按鈕，div一直加速//dir值是負(fù)責(zé)方向的，ta與目標(biāo)值相比，若是為負(fù)數(shù)說(shuō)明是往反方向的，而若為正數(shù)的話是往正方向的dir=parseInt(getStyle(obj,attr))<target?dir:-dir;//開(kāi)啟定時(shí)器,假定讓其等于目標(biāo)值的時(shí)候，停止下來(lái)obj.timer=setInterval(function(){var speed=parseInt(getStyle(obj,attr)) + dir; //這里的left也是可以作為參數(shù)傳遞過(guò)來(lái)的if( speed > target && dir>0 || speed < target && dir<0){speed = target}obj.style[attr]= speed +"px";if( speed == target){clearInterval(obj.timer);//移動(dòng)到第一個(gè)目標(biāo)值的時(shí)候，讓其換目標(biāo)移動(dòng),因此要在這里調(diào)用一下函數(shù)endFn && endFn();//這個(gè)寫(xiě)法就等于if(endFn){ endFn()},也就是當(dāng)endFn不是未定義的時(shí)候就調(diào)用endFn }},50)}};//兼容不同瀏覽器獲取行間樣式function getStyle ( obj, attr ) {return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];}</script>

?效果圖如下：

?

好了，今天就這樣！

轉(zhuǎn)載于:https://www.cnblogs.com/web001/p/8094693.html

總結(jié)

以上是生活随笔為你收集整理的正负值地处理以及添加回调函数小案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。