常用js函式封裝
阿新 • • 發佈：2019-02-19
//===============================Array==================================//
/**
* 陣列去重
*/
Array.prototype.Unique = function () {
return [...new Set(this)];
}
/**
* 陣列刪除某一項
* @param {String} let 要刪除那一項的值
*/
Array.prototype.DeleteByVal = function (val) {
return this.filter(function (item) {
return item !== val;
})
}
//===============================Date==================================//
/**
* 日期格式化
* @param {String} format default 'yyyy-MM-dd hh:mm:ss' 'yyyy-MM-dd'
*/
Date.prototype.DateFormat = function (format = 'yyyy-MM-dd hh:mm:ss') {
let o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (let k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return format;
}
/**
* 獲取距離今天的N天的日期 N可正可負
* @param {Number} interval default 0 -n 表示前幾天 n表示後幾天
*/
function getIntervalDate(interval = 0) {
interval = Number(interval)
let currentDate = new Date();
currentDate.setDate(currentDate.getDate() + interval);
let year = currentDate.getFullYear();
let month = (currentDate.getMonth() + 1) < 10 ? "0" + (currentDate.getMonth() + 1) : (currentDate.getMonth() + 1);
let day = currentDate.getDate() < 10 ? "0" + currentDate.getDate() : currentDate.getDate();
return year + "-" + month + "-" + day;
}
/**
* 時間戳格式化為日期格式
* @param {Number} timestamp 時間戳
* @param {String} format default 'yyyy-MM-dd hh:mm:ss' 'yyyy-MM-dd'
*/
function timestampToDate(timestamp, format = 'yyyy-MM-dd hh:mm:ss') {
return new Date(parseInt(timestamp) * 1000).DateFormat(format);
}
//===============================Object==================================//
/**
* 克隆物件
* @param {Object} source
*/
function Clone(source) {
return JSON.parse(JSON.stringify(source))
}
/**
* 設定樣式
* @param {HTMLElement} elem 需要設定的節點
* @param {Object} prop CSS屬性，鍵值物件
*/
function setStyle(elem, prop) {
if (!elem) {
return false
};
for (let i in prop) {
elem.style[i] = prop[i];
}
};
/**
* 獲取節點css屬性
* @param {HTMLElement} elem 需要獲取的節點
* @param {String} name css屬性
* @return {String} 屬性值
*/
function getStyle(elem, name) { // 獲取CSS屬性函式
if (elem.style[name] != '') return elem.style[name];
if (!!window.ActiveXObject) return elem.currentStyle[name];
return document.defaultView.getComputedStyle(elem, "").getPropertyValue(name.replace(/([A-Z])/g, "-$1").toLowerCase());
}
/**
* 獲取滑鼠游標相對於整個頁面的位置
* @return {String} 值
*/
function getX(e) {
e = e || window.event;
let _left = document.documentElement.scrollLeft || document.body.scrollLeft;
return e.pageX || e.clientX + _left;
}
function getY(e) {
e = e || window.event;
let _top = document.documentElement.scrollTop || document.body.scrollTop;
return e.pageY || e.clientY + _top;
}
/**
* 獲取class命名的節點
* @param {String} className CSS命名
* @param {String} tag 標籤名稱/去全部標籤時用 *
* @param {HTMLElement} parent 查詢的範圍，通常為包含內容的父節點
* @return {Array} 返回篩選節點的陣列集合
*/
function getElementsByClassName(className, tag, parent) {
parent = parent || document;
tag = tag || "*";
let allTags = (tag === "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
let classElems = [];
className = className.replace(/\-/g, "\\-");
let regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
for (let i = 0; i < allTags.length; i++) {
elem = allTags[i];
if (regex.test(elem.className)) {
classElems.push(elem);
};
};
return classElems;
};
/**
* 為目標元素新增事件監聽器
* @method on||addEvent
* @static
* @param {HTMLElement} elem 目標元素
* @param {String} type 事件名稱 如：click|mouseover
* @param {Function} listener 需要新增的監聽器
* @return 返回操作的元素節點
*/
function on(elem, type, listener) {
type = type.replace(/^on/i, '').toLowerCase();
let realListener = listener;
// 事件監聽器掛載
if (elem.addEventListener) {
elem.addEventListener(type, realListener, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, realListener);
}
return elem;
};
let EventHandle = {
addEvent:function(ele,type,handle){
if(ele.addEventListener){
ele.addEventListener(type,handle,false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type,handle);
}else{
ele["on"+type] = handle;
}
},
deleteEvent:function(ele,type,handle){
if(ele.removeEventListener){
ele.removeEventListener(type,handle,false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type,handle);
}else{
ele["on"+type] = null;
}
}
}
/**
* 千分位顯示 常用於價格
* @param {Number} num
*/
function toThousands(num) {
return parseFloat(num).toFixed(2).replace(/(\d{1,3})(?=(\d{3})+(?:\.))/g, "$1,");
}
console.log(toThousands(252121321.25))
/**
* 動態載入 CSS 樣式檔案
*/
function LoadStyle(url) {
try {
document.createStyleSheet(url);
} catch (e) {
let cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
let head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink);
}
}
/**
* 返回瀏覽器版本
*/
function getExplorerInfo() {
let explorer = window.navigator.userAgent.toLowerCase();
// ie
if (explorer.indexOf("msie") >= 0) {
let ver = explorer.match(/msie ([\d.]+)/)[1];
return {
type: "IE",
version: ver
};
}
// firefox
else if (explorer.indexOf("firefox") >= 0) {
let ver = explorer.match(/firefox\/([\d.]+)/)[1];
return {
type: "Firefox",
version: ver
};
}
// Chrome
else if (explorer.indexOf("chrome") >= 0) {
let ver = explorer.match(/chrome\/([\d.]+)/)[1];
return {
type: "Chrome",
version: ver
};
}
// Opera
else if (explorer.indexOf("opera") >= 0) {
let ver = explorer.match(/opera.([\d.]+)/)[1];
return {
type: "Opera",
version: ver
};
}
// Safari
else if (explorer.indexOf("Safari") >= 0) {
let ver = explorer.match(/version\/([\d.]+)/)[1];
return {
type: "Safari",
version: ver
};
}
}
/**
* 判斷是否移動裝置
*/
function isMobile() {
if (typeof this._isMobile === 'boolean') {
return this._isMobile;
}
let screenWidth = this.getScreenWidth();
let fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport ||
rendererModel.runningExperiments.fixviewport;
let fixViewPortsExperimentRunning = fixViewPortsExperiment &&
(fixViewPortsExperiment.toLowerCase() === "new");
if (!fixViewPortsExperiment) {
if (!this.isAppleMobileDevice()) {
screenWidth = screenWidth / window.devicePixelRatio;
}
}
let isMobileScreenSize = screenWidth < 600;
let isMobileUserAgent = false;
this._isMobile = isMobileScreenSize && this.isTouchScreen();
return this._isMobile;
}
/**
* 判斷是否移動裝置訪問
*/
function isMobileUserAgent() {
return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i
.test(window.navigator.userAgent.toLowerCase()));
}
/**
* 判斷是否蘋果移動裝置訪問
*/
function isAppleMobileDevice() {
return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent
.toLowerCase()));
}
/**
* 判斷是否安卓移動裝置訪問
*/
function isAndroidMobileDevice() {
return (/android/i.test(navigator.userAgent.toLowerCase()));
}
/**
* 判斷是否Touch螢幕
*/
function isTouchScreen() {
return (('ontouchstart' in window) || window.DocumentTouch &&
document instanceof DocumentTouch);
}
/**
* 判斷是否在安卓上的谷歌瀏覽器
*/
function isNewChromeOnAndroid() {
if (isAndroidMobileDevice()) {
let userAgent = navigator.userAgent.toLowerCase();
if ((/chrome/i.test(userAgent))) {
let parts = userAgent.split('chrome/');
let fullVersionString = parts[1].split(" ")[0];
let versionString = fullVersionString.split('.')[0];
let version = parseInt(versionString);
if (version >= 27) {
return true;
}
}
}
return false;
}
/**
* 獲取頁面高度
*/
function getPageHeight() {
let g = document,
a = g.body,
f = g.documentElement,
d = g.compatMode == "BackCompat" ?
a :
g.documentElement;
return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}
/**
* 獲取頁面scrollLeft
*/
function getPageScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
/**
* 獲取頁面寬度
*/
function getPageWidth() {
let g = document,
a = g.body,
f = g.documentElement,
d = g.compatMode == "BackCompat" ?
a :
g.documentElement;
return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}
/**
* 獲取頁面scrollTop
*/
function getPageScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
/**
* 獲取頁面可視高度
*/
function getPageViewHeight() {
let d = document,
a = d.compatMode == "BackCompat" ?
d.body :
d.documentElement;
return a.clientHeight;
}
function MouseWheelHandle (obj,handle){
let info = navigator.userAgent;
let down = null;
if(info.indexOf("Firefox") !=-1){
obj.addEventListener("DOMMouseScroll",function(event){
let ev = event ||window.event;
if(ev.detail>0){
down = true;
}else{
down = false;
}
handle(down,ev);
handle.apply(obj,[down,ev]);
},false);
}else{
obj.onmousewheel = function(event){
let ev = event || window.event;
if(ev.wheelDelta >0){
down =false;
}else{
down = true;
}
handle(down,ev);
handle.apply(obj,[down,ev]);
handle.call(obj,down,ev);
}
}
}