常见js函数收集:
转自:http://www.qdfuns.com/notes/36030/2eb2d45cccd4e62020b0a6f0586390af.html
//运动框架 function animate(obj,targetJson,time,callback){ if(window.navigator.userAgent.indexOf("MSIE") != -1){ var interval = 50; }else{ var interval = 10; } //得到现在的状态当作信号量;这个信号量是所有要变化属性的集合; var nowJson = {};//信号量对象; //给信号量对象添加属性,添加什么属性,目标对象中有什么属性,这里就添加什么属性 //值就是当前的计算样式 for(var k in targetJson) { nowJson[k] = parseFloat(fetchComputedStyle(obj,k)); } console.log(nowJson); //我们思考一下,我们的动画是10毫秒执行一次,而用户让我们time毫秒执行完毕动画 //也就是说,总执行函数次数: var maxcount = time/interval; var count = 0; //继续深入思考,动画总次数是maxcount次,那么每一次动画变化的步长就有了啊! //所以我们现在要再来一个JSON,放置所有属性的步长 var stepJson = {}; for(var k in targetJson) { //捎带脚,把每个targetJSON中的值都去掉px targetJson[k] = parseFloat(targetJson[k]); stepJson[k] = (targetJson[k] - nowJson[k])/maxcount; } //至此,三个非常重要的JSON整理完毕。分别是: //信号量JSON : nowJson //终点JSON : targetJson //步长JSON : stepJson //这三个JSON所有的k都一样。 // console.log(semaphoreJson); // console.log(targetJson); // console.log(stepJson); //总体思路就是nowJson每一帧都在变 var timer = null; timer = setInterval(function (){ for(var k in targetJson) { nowJson[k] +=stepJson[k]; if(k!='opacity') { obj.style[k] = nowJson[k] + 'px'; }else{ obj.style[k] = nowJson[k]; obj.style.filter = "alpha(opacity=" + (nowJson[k] * 100) + ")"; } } //console.log(nowJson); //计数器; count++; if(count == maxcount) { //次数够了,所以停表。 //这里抖一个小机灵,我们强行让obj跑到targetJSON那个位置 /*for(var k in targetJson) { if(k!='opacity'){ obj.style[k] =parseFloat( targetJson[k]) +'px'; }else{ obj.style[k] = targetJson[k]; obj.style.filter = "alpha(opacity=" + (targetJson[k] * 100) + ")"; } }*/ //停表 clearInterval(timer); callback&&callback(); //调用回调函数 } },interval) function fetchComputedStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } } /* 说明:获得元素相应属性值;不能获取未定义属性值 @obj ----->元素本身 @attr ------>要获取元素的属性值的属性 */ function getStyle(obj,attr){ return obj.currentStyle? obj.currentStyle[attr]: getComputedStyle(obj)[attr]; } /* 说明:抖函数;使一个元素上下左右抖动 @obj ---->元素本身 @attr ----->抖动方向("top"和"left") @endFn---->回调函数(可有可无) */ function shake(obj,attr,endFn){ if (obj.onoff) {return};//加开关修复抖函数 obj.onoff=true; var arr = []; var num = 0; var k=null; for(var i=20;i>0;i-=2) { arr.push(i,-i); } arr.push(0) clearInterval(shake.timer) shake.timer=setInterval(function(){ obj.style[attr]=parseInt(getStyle(obj,attr))+arr[num]+"px"; num++ if (num==arr.length) { clearInterval(shake.timer) obj.onoff = false; endFn&&endFn(); } },100) } /* 说明:传入一个数num,如果该数小于10,返回其前面加0的字符串,如果大于10则返回该数的字符串; @num----->传入的数。 */ function twoNum(num){ if(num<10) { return "0"+num; } else{ return ""+num; } } /* 说明:传入x和y两数,返回在x-y之间的随机数; */ function getRandom(x,y){ return Math.round(Math.random()*(y-x)+x); } /* 说明:控制元素的透明度渐变效果 @obj------>要传入的元素 @dir------->透明度渐变的速度 @target----->透明度变化的目标 @endFn----->回调函数(可有可无); */ function Opacity(obj,dir,target,endFn){ if(target>100||target<0) { alert('输入范围不对'); return } dir=getStyle( obj, 'opacity')*100 < target?dir:-dir; clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed = getStyle(obj,'opacity')*100+dir; if(dir<0&&speed<target||dir>0&&speed>target) { speed=target; } obj.style.opacity=speed/100; if(speed==target) { clearInterval(obj.timer); endFn&&endFn(); } },14) } /* 说明:数组去重函数;传入一个数组,返回去重过后的数组; @arr----->需要去重的数组; */ function arrQc(arr){ for(var i=0;i<arr.length;i++) { for(var j=i+1;j<arr.length;j++) { if(arr[i]==arr[j]) { arr.splice(j,1); j--; } } } return arr; } /* 说明:获取元素的位置; @obj------->要获取位置的元素; */ function getPos(obj){ var pos = {left:0,top:0} while(obj) { pos.left+= obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; } /* 说明:通过类名获得元素; @parent------->父级元素; @TagName------->要通过类名获得的元素标签名; @className------->类名; */ function getElementsByClassName(parent,TagName,className){ var oAll = parent.getElementsByTagName(TagName); var arr=[]; for(var i=0;i<oAll.length;i++) { /*if(oAll[i].className=='div1') { arr.push(oAll[i]); }*/ var arr1 = oAll[i].className.split(" "); for(var j=0;j<arr1.length;j++) { if(arr1[j]==className) { arr.push(oAll[i]); break; } } } return arr } /* 说明:为元素添加class @obj------->要添加class的元素 @className--------->为元素添加的className; */ function addClass(obj,className){ var arr = obj.className.split(" "); for(var i=0;i<arr.length;i++){ if(arr[i]==className) { alert('ok'); return } } arr.push(className); obj.className=arr.join(" "); } /* 说明:数组的indexOf()方法,找到数组中的元素,并返回该元素在数组中的位置; @arr---->传入的数组 @v------>需在数组中返回位置的元素 */ function arrIndexOf(arr,v){ for(var i=0;i<arr.length;i++) { if(arr[i]===v) { return i; } } return -1; } /* 说明:删除元素class; @obj------->要删除class的元素; @className-------->要删除的class值; */ function removeClass (obj,className){ var arr1= obj.className.split(" "); var _index = arrIndexOf(arr1,className); if(_index != -1){ arr1.splice(_index,1); obj.className=arr1.join(" "); } } /* 说明:事件绑定的第二种方式,可以让一个元素的一个事件同时触发2个事件函数 @obj------>要绑定事件的元素 @evname-------->事件名称 @fn----------->事件函数 */ function bind(obj,evname,fn){ obj.addEventListener?obj.addEventListener(evname,fn,false):obj.attachEvent('on'+evname,function(){ fn.call(obj); }) } /* 说明:拖曳函数 @obj-------->要拖曳的元素 */ function drag (obj){ obj.onmousedown = function (ev){ var ev = ev || event; //获取鼠标点击位置与元素的左右距离; var disX = ev.clientX-obj.offsetLeft; var disY = ev.clientY-obj.offsetTop; if(obj.setCapture) { obj.setCapture(); } document.onmousemove = function (ev) { var ev = ev || event; var L = ev.clientX-disX; var T = ev.clientY-disY; /*if(L<100)//改变该值可以实现磁性吸附效果; { L = 0; }else if(L>document.documentElement.clientWidth - oDiv.offsetWidth) { L = document.documentElement.clientWidth - oDiv.offsetWidth; } if(T<0) { T = 0; }else if(T>document.documentElement.clientHeight - oDiv.offsetHeight) { T = document.documentElement.clientHeight- oDiv.offsetHeight; } oDiv.style.left = L+'px'; oDiv.style.top = T+'px'; //该段代码可限制拖曳范围; */ obj.style.left = L+'px'; obj.style.top = T+'px'; } document.onmouseup = function (){ document.onmouseup =document.onmousemove = null; if(obj.releaseCapture) { obj.releaseCapture(); } } return false; } } //得到cookie; function getCookie(key){ var arr1 = document.cookie.split('; '); for(var i = 0;i<arr1.length;i++) { var arr2 = arr1[i].split('='); if(arr2[0]==key) { return decodeURI(arr2[1]); } } } //设置cookie; function setCookie(key,value,t){ var oDate = new Date(); oDate.setDate(oDate.getDate()+t); oDate.toGMTString(); document.cookie = key+'='+encodeURI(value)+';expires='+oDate; } //删除cookie; function removeCookie(key){ setCookie(key,'',-1); }