1. 程式人生 > 實用技巧 >封裝 Javascript 功能性函式

封裝 Javascript 功能性函式

var Tool = (function () {
return {
//缺陷:只能淺複製 (簡單物件,不能進行深度複製)
setStyle: function (elem, style) {
for (var prop in style) {
elem.style[prop] = style[prop];
}
},
//倒計時函式
countDown: function (time) {
var nowTime = +new Date();
var inputTime = new Date(time);
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + "天" + h + "時" + m + "分" + s + "秒";
},
//隨機顏色
randomColor: function (alpha) {
if (alpha = 1 || isNaN(alpha) || alpha < 0) {
alpha = 1; //alpha: 透明度
}
var color = "rgba(";
for (var i = 0; i < 3; i++) {
color += parseInt(Math.random() * 256);
color += ",";
}
color += alpha + ")";
return color;
},
// 預載入圖片
loadImage: function (arr, callback) {
var img = new Image();
img.arr = arr;
img.callback = callback;
img.imgList = []; //用來儲存所有載入好的元素
img.num = 0;
img.addEventListener("load", this.loadHandler);
img.src = arr[img.num];
},
loadHandler: function (e) {
this.imgList.push(this.cloneNode(false)); //複製節點
this.num++;
if (this.num > this.arr.length - 1) {
callBackFun(this.imgList);
this.removeEventListener("load", Tool.loadHandler);
return;
}
this.src = this.arr[this.num];
},
//拖動
dragElem: function (elem) {
elem.addEventListener("mousedown", this.mouseHandler);
elem.style.position = "absolute";
elem.self = this;
},
removeDrag: function (elem) {
elem.removeEventListener("mousedown", this.mouseHandler);
elem.self = null;
},
mouseHandler: function (e) {
switch (e.type) {
case "mousedown":
e.preventDefault();
document.addEventListener("mousemove", this.self.mouseHandler);
this.addEventListener("mouseup", this.self.mouseHandler);
this.x1 = e.offsetX;
this.y1 = e.offsetY;
document.elem = this;
break;
case "mousemove":
this.elem.style.left = e.clientX - this.elem.x1 + "px";
this.elem.style.top = e.clientY - this.elem.y1 + "px";
var evt = new Event("elemMove"); //自定義拋發事件
this.elem.dispatchEvent(evt);
break;
case "mouseup":
document.removeEventListener("mousemove", this.slef.mouseHandler);
this.removeEventListener("mouseup", this.slef.mouseHandler);
break;
}
},
//拖拽(20200130)
Drag: function (node) {
node.onmousedown = function (ev) {
var e = ev || window.event;
//記錄滑鼠和被拖拽物體相對位置
var offsetX = e.clientX - node.offsetLeft;
var offsetY = e.clientY - node.offsetTop;

				//被拖拽物體保持相對距離和滑鼠移動
				document.onmousemove = function (ev) {
					var e = ev || window.event;
					node.style.left = e.clientX - offsetX + "px";
					node.style.top = e.clientY - offsetY + "px";
				}
			}
			//取消拖拽
			document.onmouseup = function () {
				document.onmousemove = null;
			}
		},
		//拖拽(限制出界)
		limitDrag: function (node) {
			node.onmousedown = function (ev) {
				var e = ev || window.event;
				//記錄滑鼠和被拖拽物體相對位置
				var offsetX = e.clientX - node.offsetLeft;
				var offsetY = e.clientY - node.offsetTop;

				//被拖拽物體保持相對距離和滑鼠移動
				document.onmousemove = function (ev) {
					var e = ev || window.event;
					var l = e.clientX - offsetX;
					var t = e.clientY - offsetY;
					//限制出界
					if (l <= 0) {
						l = 0;
					}
					var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
					if (l >= windowWidth - node.offsetWidth) {
						l = windowWidth - node.offsetWidth;
					}
					if (t <= 0) {
						t = 0;
					}
					var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
					if (t >= windowHeight - node.offsetHeight) {
						t = windowHeight - node.offsetHeight;
					}
					node.style.left = l + "px";
					node.style.top = t + "px";
				}
			}
			//取消拖拽
			document.onmouseup = function () {
				document.onmousemove = null;
			}
		},
		//隨機位置
		getRandomPosition: function (elem) {
			var w = document.documentElement.clientWidth - elem.offsetWidth;
			var h = document.documentElement.clientHeight - elem.offsetHeight;
			elem.style.position = "absolute";
			elem.style.left = Math.random() * w + "px";
			elem.style.top = Math.random() * h + "px";
		},
		//碰撞(如果兩個元素髮生碰裝返回 true) 
		hitTest: function (elem0, elem1) {
			var range0 = elem0.getBoundingClientRect();
			var range1 = elem1.getBoundingClientRect();
			if (range0.left >= range1.left && range0.left <= range1.right && range0.top >= range1.top && range0.top <= range1.bottom) {
				return true;
			}
			if (range0.right >= range1.left && range0.right <= range1.right && range0.top >= range1.top && range0.top <= range1.bottom) {
				return true;
			}
			if (range0.left >= range1.left && range0.left <= range1.right && range0.bottom >= range1.top && range0.bottom <= range1.bottom) {
				return true;
			}
			if (range0.right >= range1.left && range0.right <= range1.right && range0.bottom >= range1.top && range0.bottom <= range1.bottom) {
				return true;
			}
			return false;
		},
		//選擇排序
		changeSortAsc(arr) {
			for (var i = 0; i < arr.length; i++) {
				for (var j = i + 1; j < arr.length; j++) {
					if (arr[i] > arr[j]) {
						var temp = arr[i];
						arr[i] = arr[j];
						arr[j] = temp;
					}
				}
			}
		},
		//獲取元素當前樣式(跨瀏覽器相容)
		getStyle(node, cssStyle) {
			return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
		},
		//緩動動畫
		animate : function(obj, target, callback) {
			clearInterval(obj.timer);
			obj.timer = setInterval(function () {
				var step = (target - obj.offsetLeft) / 10;
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				if (obj.offsetLeft == target) {
					clearInterval(obj.timer);
					if (callback) {
						callback()
					}
				}
				obj.style.left = obj.offsetLeft + step + "px";
			}, 16)
		}
	}
})();