zoukankan      html  css  js  c++  java
  • js函数收集

    常见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);
    	}
    

      

  • 相关阅读:
    时间已经到了再一次发了博客
    java排错
    毕业设计
    做生意这件事
    性能优化的原理和理解
    【Linux】-NO.87.Assembly.1.滴水逆向.1.001-【介绍】-
    【Java】NO.80.Note.1.Java.1.001-【Java 各种特性概念】
    【Common】NO.81.Note.1.Common.1.001-【各种英文符号的表示及念法】
    【UML】NO.55.EBook.8.UML.3.001-【UML和模式应用 第3版】
    【UML】NO.54.EBook.6.UML.2.002-【Thinking In UML 大象 第二版】- UML 核心元素
  • 原文地址:https://www.cnblogs.com/liuyang92/p/6175673.html
Copyright © 2011-2022 走看看