封裝 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) } } })();