js函数收集

Posted 2020-08-23 aWolfMan

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