Common JS Function Collection:
Transferred from: http://www.qdfuns.com/notes/36030/2eb2d45cccd4e62020b0a6f0586390af.html
Motion frame function Animate (Obj,targetjson,time,callback) {if (Window.navigator.userAgent.indexOf ("MSIE")! =-1) {var Interval = 50;} Else{var interval = 10;} Get the current state as a semaphore; This semaphore is the set of all attributes to be changed; var Nowjson = {};//semaphore object;//Add a property to the semaphore object, add a property, what property is in the target object, what property is added here//value is the current calculated style for ( var k in Targetjson) {nowjson[k] = parsefloat (Fetchcomputedstyle (Obj,k));} Console.log (Nowjson);//We think about it, our animation is executed 10 milliseconds, and the user lets us finish the animation in time milliseconds//That is, the total number of execution functions: var maxcount = Time/interval;var Count = 0;//Continue in-depth thinking, the total number of animations is maxcount times, then each time the animation changes the step has AH! So now we're going to get another JSON, put all the attributes in step var Stepjson = {};for (var k in Targetjson) {//Piggyback feet, remove the values from each Targetjson pxtargetjson[k] = Parsefloat (Targetjson[k]); Stepjson[k] = (Targetjson[k]-nowjson[k])/maxcount;} At this point, three very important JSON finishes. The difference is://Semaphore json:nowjson//End json:targetjson//Step json:stepjson//The three JSON all k are the same. Console.log (Semaphorejson);//Console.log (Targetjson);//Console.log (Stepjson);//The general idea is to nowjson every frame is variable 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);//Counter; count++;if (count = = Maxcount) {//times enough, so stopwatch. Here is a little clever, we forcibly let obj run to Targetjson that position/*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) + ")";} *///stopwatch clearinterval (timer); Callback&&callback ();//Call callback function}},interval) function Fetchcomputedstyle (obj, attr) {return obj.currentstyle?obj.currentstyle[attr]:getcomputedstyle (obj) [attr];}} /* Description: Gets the value of the corresponding attribute of the element; Cannot get undefined attribute value @obj-----> element itself @attr------> property to get the attribute value of the element */function GetStyle (obj,attr) {return Obj.currentstyle? OBJ.CURRENTSTYLE[ATTR]: getComputedStyle (obj) [attr];} /* Description: jitter function; @obj----> elements themselves @attr-----> Jitter Direction ("Top" and "left") @endFn----> callback function (optional) */function shake ( OBJ,ATTR,ENDFN) {if (Obj.onoff) {return};//plus switch repair jitter function 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)}/* Description: Passes in a number num, if the number is less than 10, returns the string preceded by 0, if greater than 10 returns the string of that number, @num-----> incoming number. */function twonum (num) {if (num<10) {return "0" +num;} Else{return "" +num;}} /* Description: Pass in X and y two number, return the random number between XY; */function getrandom (x, y) {return Math.Round (Math.random () * (y-x) +x);} /* Description: Controls the transparency gradient effect of the element @obj------> The element to be passed @dir-------> The speed of the transparency gradient @target-----> The target of the transparency change @endfn-----> callback function (optional); */function Opacity (OBJ,DIR,TARGET,ENDFN) {if (target>100| | target<0) {alert (' incorrect input range '), 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)}/* Description: Array de-weight function, passing in an array, Returns an array of @arr-----> need to go to the heavy array; */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;} /* Description: Gets the position of the element, @obj-------> The element to get the position; */function GetPos (obj) {var pos = {left:0,top:0}while (obj) {pos.left+= Obj.offsetleft;pos.top + = Obj.offsettop;obj = obj.offsetparent;} return POS;} /* Description: Get element by class name, @parent-------> parent element, @TagName-------> element tag name to be obtained by class name; @className-------> class name; */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}/* Description: Add class@obj for element-------> element to add Class @classname---------> Add classname;*/function addclass for Element (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 ("");} /* Description: The indexof () method of the array, locate the element in the array, and return the position of the element in the array, @arr----> incoming array @v------> The element to return the position in the array */function arrindexof (arr,v {for (Var i=0;i<arr.length;i++) {if (arr[i]===v) {return i;}} return-1;} /* Description: Delete element class, @obj-------> to delete the element of class, @className--------> class value to delete; */function Removeclass (obj,classname {var arr1= obj.className.split (""), var _index = Arrindexof (Arr1,classname), if (_index! =-1) {arr1.splice (_index,1); o Bj.classname=arr1.join ("");}} /* Description: The second way of event binding allows one event of an element to trigger 2 event functions simultaneously @obj------> elements to bind events @evname--------> event name @fn-----------> Event function */ function bind (OBJ,EVNAME,FN) {Obj.addeventlistener?obj.addeventlistener (Evname,fn,false): Obj.attachevent (' on ' + Evname,function () {fn.call (obj);})} /* Description: Drag function @obj--------> element to drag */function drag (obj) {obj.onmousedown = function (EV) {var ev = EV | | event;// Get the mouse click position and the left and right distance of the element; 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)// The magnetic adsorption effect can be achieved by changing this value; {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 ';//The Segment code can limit the drag range; */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;}} Get 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]);}}} Set Cookie;function setcOokie (key,value,t) {var odate = new Date (); Odate.setdate (Odate.getdate () +t); Odate.togmtstring ();d Ocument.cookie = key + ' = ' +encodeuri (value) + '; expires= ' +odate;} Delete cookie;function Removecookie (key) {Setcookie (Key, ',-1);}
JS Function Collection