今天寫一個簡單的小例子，需求：頁面有多個div，點擊屏幕，div有順序的依次下來。

來看js代碼：

<script>window.onload=function(){//第一步先追加多個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;//添加點擊事件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);//這里先要清除一下定時器是為了防止一直點擊按鈕，div一直加速//dir值是負責方向的，ta與目標值相比，若是為負數說明是往反方向的，而若為正數的話是往正方向的dir=parseInt(getStyle(obj,attr))<target?dir:-dir;//開啟定時器,假定讓其等于目標值的時候，停止下來obj.timer=setInterval(function(){var speed=parseInt(getStyle(obj,attr)) + dir; //這里的left也是可以作為參數傳遞過來的if( speed > target && dir>0 || speed < target && dir<0){speed = target}obj.style[attr]= speed +"px";if( speed == target){clearInterval(obj.timer);//移動到第一個目標值的時候，讓其換目標移動,因此要在這里調用一下函數endFn && endFn();//這個寫法就等于if(endFn){ endFn()},也就是當endFn不是未定義的時候就調用endFn }},50)}};//兼容不同瀏覽器獲取行間樣式function getStyle ( obj, attr ) {return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];}</script>

?效果圖如下：

?

好了，今天就這樣！

轉載于:https://www.cnblogs.com/web001/p/8094693.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。