js常用效果代码封装

本文汇总了作者在工作中常用的JavaScript代码,包括时间格式化、AJAX、鼠标滚轮事件、拖拽功能、Tab切换、导航滚动、JSON数据处理和瀑布流布局等,旨在提供一个便捷的代码库供日后使用。
摘要由CSDN通过智能技术生成

    我们在工作中经常需要写很多效果或方法,但是有些效果和方法我们都已经写过无数次了,因此我们会把这些代码给封闭起来,以便以后使用,以下就是我个人在工作中整理出的一些常用代码,以后会不定期更新。


1、时间格式化

                Date.prototype.Format = function(format) { //对所有时间对象加上原型操作
				format ? format : format = "yyyy-MM-dd hh:mm:ss"; //不传则默认format(最后一个format可以删掉)
				var o = {
					//this并不在对象的内部函数,此时this指Date
					"M+": this.getMonth() + 1, // month
					"d+": this.getDate(), // day
					"h+": this.getHours(), // hour
					"m+": this.getMinutes(), // minute
					"s+": this.getSeconds(), // second
					"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
					"S": this.getMilliseconds()
						// millisecond
				};
				//如果传入format里有y则对y用get的year进行替换
				if (/(y+)/.test(format)) {
					//根据传入的y数量截取get的Fullyear并替换掉所有的y,保留下中间的-:等符号
					format = format.replace(RegExp.$1, (this.getFullYear() + "").slice(4 - RegExp.$1.length));//如果就接一个参数,截到底,slice和substr,substring一样
				}
				//遍历剩下的m,h,s等
				for (var k in o) {
					//匹配mdh等,如果传入的format里有,则执行下面的替换
					if (new RegExp("(" + k + ")").test(format)) {
						//将传入的format的yyyy,MM,mm等替换为获得到mouth,date,hours
						//补了两个0,如果需要03这样的效果,根据3的长度为1,从003的第2个开始截到最后,即03;如果是33则从0033的第3个开始截取到最后,即33;
						//''+o[k]将数字转换成字符串然后可以.length计算其长度
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substring(("" + o[k]).length));
					}
				}
				return format; //返回规定格式的date时间
			};
//			var date = new Date() //创建时间对象
//			alert(date.Format('yyyy-MM-dd hh:mm:ss'))//字母必须大小写一致,空格-等符号无所谓,Mmd等可以根据需要不传(也就不显示了)
//		直接这样用: (new Date()).Format('yyyy-MM-dd hh:mm:ss')



2、ajax


function addUrl(url,type,obj){
	var arr = [];
	for(var i in obj){
		arr.push(i+"="+obj[i]);
	}
	if(type == "post"){
		return arr.join("&");
	}else{
		var path = url+"?"+arr.join("&");
		return path;
	}
}	


function ajaxLogin(obj){
		obj.type = obj.type || "get";    //不传递时默认为get
		obj.data = obj.data || {};   //不传递时默认为空
		if(window.XMLHttpRequest){
			ajax = new XMLHttpRequest();
		}else{
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		
		if(obj.type.toLowerCase() == "post"){
			
			ajax.open("POST",obj.url,true);
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			var data = addUrl("任意值","post",obj.data);
			ajax.send(data);
		}else if(obj.type.toLowerCase() == "get"){
			//通过自行封装的函数,将url和data拼接成字符串路径
			var path = addUrl(obj.url,"get",obj.data);
			ajax.open("GET",path,true);
			ajax.send();
		}
		
		ajax.onreadystatechange = function() {
			if (ajax.readyState==4) { 
				if (ajax.status>=200&&ajax.status<300||ajax.status==304) { 
					if(obj.onsuccess){
						obj.onsuccess(ajax.responseText);
					}
				} else {
					if(obj.onerror){
						obj.onerror(ajax.status);
					}
				}
			} 
		}
	}
	//使用方法
	// ajaxLogin({
	// 	url:"login.php",
	// 	type:"get",
	// 	data:{
	// 		user:user.value,
	// 		pass:pass.value
	// 	},
	// 	onsuccess:function(data){
	// 		alert(data);
	// 	},
	// 	onerror:function(data){
	// 		alert("失败了,错误信息为:"+data);
	// 	}
	// });



3、onmousewheel


function MouseWheel(ele,fun){
			//判断浏览器类型
	var agent = window.navigator.userAgent;
	//判断是否是火狐浏览器
	if(agent.indexOf("Firefox")!=-1){
		ele.addEventListener("DOMMouseScroll",wheel);
	}else{
		ele.onmousewheel = wheel;
	}
	
	//创建一个处理向上向下滚动的函数 事件处理程序
	function wheel(ev){
		var down = false;
		if(ev.detail>0){
			down = true;
		}
		if(ev.wheelDelta < 
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值