首页 > 代码库 > 几个非常有用的js小函数

几个非常有用的js小函数

2024-07-07 14:02:08   225人阅读

 1 function $(v){
 2                   if(typeof v==="function"){
 3                        window.onload=v;
 4                   }else if(typeof v==="string")
 5                   {
 6                        return document.getElementById(v);    
 7                   }else if(v==="object")
 8                   {
 9                        return v;
10                   }
11              }
12

这个小函数模拟jQuery中的$函数做了一些非常简单的事情。用来获取id,模拟window.onload等等；

  function getStyle(obj,str){

return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];
}

用来获取元素的属性，有几个限制，1.不能获取未设定的属性，属性中不能有多余的空格；

function stopBubble(e){ 
        if(e&&e.stopPropagation){     
            e.stopPropagation(); 
        }else{ 
            window.event.cancelBubble = true; 
        } 
    }

事件冒泡绝对是比较头疼的问题了用上面这个函数吧；把函数导入到你的页面中。然后在你不要执行某操作的的事件里面加个变量e，在底下写上一句

stopBubble(e);就好了；

  function doMove(div,arr,dir,target,endfn){
    dir=parseInt(getStyle(div,arr))<target?dir:-dir;
    clearInterval(div.timer);
   div.timer=setInterval(function(){
     var speed =parseInt(getStyle(div,arr))+dir;
       if(speed>target&&dir>0||speed<target&&dir<0)
      {
        speed=target;
      }
      div.style[arr]=speed+"px";
      if(speed==target)
      {
        clearInterval(div.timer);
       endfn&&endfn();
      }
    
    },30)
  

}

这个小函数需要配合上面的getStyle一起使用，作用是对某个对象进行移动。变量分别是，div是要移动的对象，arr是要移动的属性（如left,top等等（但是因为getStyle只能获取定义的属性，所以一定要在css里面定义哦））dir是速度（不用考虑正负），target是你要到达的位置

    
            function doShake(obj,max_length,att){
                function getStyle(obj,str){
                    return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];//获取元素属性
                }
                var arr=[];
                var num=0;
                for(var i=max_length;i>=0;i--)
                {
                    arr.push(i,-i)
                }
                arr.pop();//做一个数组如果max_length=5;数组就是[5,-5,4,-4,3,-3,2,-2,1,-1,0]
                 clearInterval(obj.timer);//清楚定时器防止多次点击出现异常；
            
            obj.timer=setInterval(function(){obj.style[att]=parseInt(getStyle(obj,att))+arr[num]+"px";//开定时器每个100毫秒改变元素的某个属性等于arr的第num项
                num++
                if(num==arr.length)
                {
                   clearInterval(obj.timer);
                }//判断num等于arr.length停定时器
            },100)    }

抖动小函数，用来让一个对象轻轻的抖动，max_length是抖动的峰值，att是你想让那个属性抖动，统一配合getStyle使用；一点点问题，/*我不知道怎么改,就是当用户在第一次使用没结束前再次执行操作，对象就回不到原来的位置。求大神；*/


联系
我们