js常见的封装

//----------------------------解决兼容性方法------------------------------------------------------------
//获取元素的计算后样式属性

function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return window.getComputedStyle(element, null)[attr];
}
}

//scroll().top or scroll().left获取已经滚动到元素的左边界或上边界的像素数

function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}

//获取可视窗口大小

function client() {
return {
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}

//event兼容

var eventCompatible = {
//event兼容
getEvent: function(event) {
return event || window.event;
},

//阻止冒泡事件
stopPropagation: function(event) {
var event = event || window.event;
if(event && event.stopPropagation) {
return event.stopPropagation();
} else {
return event.cancelBubble = true;
}
},

//event.target 事件的目标 (事件委托)
getTarget: function(event) {
var event = event || window.event;
return event.target ? event.target : event.srcElement;
},

//鼠标页面坐标
page: function(event) {
var event = event || window.event;
return {
x: event.pageX || event.clientX + document.documentElement.scrollLeft,
y: event.pageY || event.clientY + document.documentElement.scrollTop
};
},

//阻止默认行为
prevent: function(event){
var event = event || window.event;
if (event.preventDefault) {
return event.preventDefault();
}else{
return event.returnValue = false;
}
}
};

//监听事件兼容处理

//清除选择

function clearSelection() {
return window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}

//---------------------------------------------------------------------------------------
//-----------------------自定义的方法------------------------------------------------

// trim

function trim(str) {
return str.replace(/^s+|s+$/g, "");
}

//十进制转其他进制 type类型有"bit"、"oct"、"hex"

//二进制、八进制、十六进制转十进制;

//转动时钟

function clock() {
var d = new Date();
var ms = d.getMilliseconds();
var s = d.getSeconds() + ms / 1000;
var m = d.getMinutes() + s / 60;
var h = d.getHours() + m / 60;
second.style.transform = "rotate(" + s * 6 + "deg)";
minute.style.transform = "rotate(" + m * 6 + "deg)";
hour.style.transform = "rotate(" + h * 30 + "deg)";
}

//匀速动画

//缓动动画(单个数值属性)

//缓动动画(多个数值属性)

}, 15)
}

//进度条

//ajax封装

//millisec是距离 GMT 时间 1970 年 1 月 1 日午夜的毫秒数 (解析通过ajax返回的数据中的毫秒数值的日期)

//右键菜单

function RightMenu(area) {
this.area = area;
this.menu = null;
}

//根据传入的值获取目标
RightMenu.prototype.target = function(area) {
if(typeof area === "string") {
return document.getElementById(area);
} else if(typeof area === "object") {
return area;
}
}

RightMenu.prototype.init = function(data, defaultStyle, userStyle, hoverStyle) {
this.createMenu(data, defaultStyle, userStyle, hoverStyle);
this.showMenu();
}

RightMenu.prototype.createMenu = function(data, defaultStyle, userStyle, hoverStyle) {
if(typeof defaultStyle == "string" && !defaultStyle) {
hoverStyle = userStyle;
userStyle = defaultStyle;
defaultStyle = true;
}
//创建菜单及样式
this.menu = document.createElement("ul");
this.menu.style.position = "absolute";
this.menu.style.margin = 0;
this.menu.style.padding = "2px";
this.menu.style.listStyle = "none";
this.menu.style.display = "none";
if(!defaultStyle) {
this.menu.style.border = "1px solid #DDDDDD";
this.menu.style.backgroundColor = "#CCCCCC";
this.menu.style.boxShadow = "5px 5px 5px #ccc";
} else {
this.menu.className = userStyle;
}
//选中项样式
var hover = document.createElement("span");
hover.style.display = "block";
hover.style.position = "absolute"
hover.style.top = 0;
hover.style.left = 0;
hover.style.boxSizing = "border-box";
hover.style.width = "100%";
hover.style.height = "100%";
if((!defaultStyle) || (defaultStyle && !hoverStyle)) {
hover.style.border = "1px solid #aaa";
hover.style.borderRadius = "5px";
hover.style.backgroundImage = "linear-gradient(to bottom,rgba(255,255,255,0.5)0%,rgba(255,255,255,0.1)50%,rgba(255,255,255,0.1)100%)";

} else {
hover.className = hoverStyle;
}
//创建菜单项
for(var item in data) {
var li = document.createElement("li");
li.style.position = "relative";
li.style.padding = "5px 10px";
li.style.cursor = "pointer";
//绑定事件
li.addEventListener("mouseenter", function() {
this.appendChild(hover);
});
li.addEventListener("mouseleave", function() {
this.removeChild(hover);
});
var itemData = data[item] for(var obj in itemData) {
if(typeof itemData[obj] === "string") {
li.innerHTML = itemData[obj];
} else if(typeof itemData[obj] === "object") {
var handlerData = itemData[obj];
for(var type in handlerData) {
li.addEventListener(type, handlerData[type]);
}
}
}
this.menu.appendChild(li);
}
this.target(this.area).appendChild(this.menu);
}

RightMenu.prototype.showMenu = function() {
var that = this;
this.menu.parentNode.oncontextmenu = function(ev) {
that.menu.style.display = "block";
that.menu.style.left = ev.pageX + "px";
that.menu.style.top = ev.pageY + "px";
if(that.menu.parentNode.offsetWidth < that.menu.offsetLeft + that.menu.offsetWidth) {
that.menu.style.left = ev.pageX - that.menu.offsetWidth + "px";
};
if(that.menu.parentNode.offsetHeight < that.menu.offsetTop + that.menu.offsetHeight) {
that.menu.style.top = ev.pageY - that.menu.offsetHeight + "px";
};
return false;
}
this.menu.parentNode.onclick = function() {
that.menu.style.display = "none";
}
document.onkeydown = function(e) {
if(e.keyCode == 18 || e.keyCode == 27) {
that.menu.style.display = "none";
}
}
}

//拖拽

function Drag(target, area) {
this.target = target;
this.area = area;
}

//根据传入的值获取目标
Drag.prototype.dragTarget = function(target) {
if(typeof target === "string") {
return document.getElementById(target);
} else if(typeof target === "object") {
return target;
}
}

Drag.prototype.init = function() {
this.target = this.dragTarget(this.target);
this.target.style.position = "absolute";
this.target.setAttribute("draggable","true");
this.dragEvent();
}

Drag.prototype.dragEvent = function() {
var that = this;
this.target.onmousedown = function(e) {
e = e || window.event;
that.disX = e.clientX - that.target.offsetLeft;
that.disY = e.clientY - that.target.offsetTop;
document.onmousemove = function(e) {
that.moveEvent(e);
}
document.onmouseup = function(){
that.target.style.opacity = "1";
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
Drag.prototype.moveEvent = function(e) {
var limitX = e.clientX - this.disX;
var limitY = e.clientY - this.disY;
//没有指定区域则用document

if (!this.area) {
this.area = document.documentElement;
}
if(limitX < this.area.offsetLeft) {
limitX = this.area.offsetLeft;
} else if(limitX > this.area.clientWidth + this.area.offsetLeft - this.target.offsetWidth) {
limitX = this.area.clientWidth + this.area.offsetLeft - this.target.offsetWidth;
}
if(limitY < this.area.offsetTop) {
limitY = this.area.offsetTop;
} else if(limitY > this.area.clientHeight + this.area.offsetTop - this.target.offsetHeight) {
limitY = this.area.clientHeight + this.area.offsetTop - this.target.offsetHeight;
}
this.target.style.left = limitX + "px";
this.target.style.top = limitY + "px";
this.target.style.opacity = "0.8";
}