常用的css樣式和js方法分享

**

樣式

**
//僞元素清除浮動 使用方式

<div class="clearfix"></div>

.clearfix:after {
	content: ''; /*設置內容爲空*/
	height: 0; /*高度爲0*/
	line-height: 0; /*行高爲0*/
	display: block; /*將文本轉爲塊級元素*/
	visibility: hidden; /*將元素隱藏*/
	clear: both; /*清除浮動*/
}

JS封裝好的方法

//設置元素之間的內容
function setInnerText(element, content) {
	//判斷element是否支持innerText
	if (typeof element.innerText === 'string') {
		element.innerText = content;
	} else {
		element.textContent = content;
	}
}


//getRawType：獲取數據類型，返回結果爲Number、String、Object、Array等
function getRawType(value) {
	return Object.prototype.toString.call(value).slice(8, -1)
}
// getoRawType([]) ⇒ Array


//isLength：檢查value是否爲有效的類數組長度
function isLength(value) {
	return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= Number.MAX_SAFE_INTEGER;
}
//isFunction：檢查value是不是函數
function isFunction(value) {
	return Object.prototype.toString.call(value) === '[object Function]'
}
//isArrayLike：檢查value是否是類數組
//如果一個值被認爲是類數組，那麼它不是一個函數，並且value.length是個整數，大於等於0，小於或等於Number.MAX_SAFE_INTEGER。這裏字符串也被當作類數組
function isArrayLike(value) {
	return value != null && isLength(value.length) && !isFunction(value);
}
//isStatic: 檢測數據是不是除了symbol外的原始數據。
function isStatic(value) {
	return (
		typeof value === 'string' ||
		typeof value === 'number' ||
		typeof value === 'boolean' ||
		typeof value === 'undefined' ||
		value === null
	)
}
//unique： 數組去重，返回一個新數組    配合上面幾個方法使用
function unique(arr){
    if(!isArrayLike(arr)){ //不是類數組對象
        return arr;
    }
    let result = []
    let objarr = []
    let obj = Object.create(null)
    
    arr.forEach(item => {
        if(isStatic(item)){//是除了symbol外的原始數據
            let key = item + '_' + getRawType(item);
            if(!obj[key]){
                obj[key] = true
                result.push(item)
            }
        }else{//引用類型及symbol
            if(!objarr.includes(item)){
                objarr.push(item)
                result.push(item)
            }
        }
    })
    return result
}
var a = unique([1,1,1,8,9,2,6,1,21,2,3,4,5,6,6,6])
console.log(a)





// 獲取min-max之間的隨機整數
function getrandom(min, max) {
	// max - 期望的最大值
	// min - 期望的最小值  	
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min;
}


//根據ID獲取元素
function getElement(id) {
	return document.getElementById(id);
}


//獲取頁面滾動出去的距離 並處理兼容性
function getScroll() {
	return {
		scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
		scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
	}
}

//獲取鼠標在頁面上的座標
function getPage(e) {
	return {
		pageX: e.clientX + getScroll().scrollLeft,
		pageY: e.clientY + getScroll().scrollTop
	}
}


// 13位時間戳轉日期
var getLocalTime = function(nS) {
	//return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/,' ');
	var date = new Date(nS);
	var Y = date.getFullYear() + '/';
	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
	var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
	var h = date.getHours() + ':';
	var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ' ';
	//var s = date.getSeconds();
	var time = Y + M + D + h + m;
	console.log("時間戳轉爲日期", time)
}
//傳入時間戳
getLocalTime(1546264789543);




//數組去重， 只考慮數組中元素爲數字或者字符串
function newarr(arr) {
	var arrs = [];
	for (var i = 0; i < arr.length; i++) {
		if (arrs.indexOf(arr[i]) == -1) {
			arrs.push(arr[i])
		}
	}
	return arrs;
}
console.log("數組去重結果", newarr([1, 2, 3, 2, 3, 4, 6, 8])); //123468



//生成隨機UID   用戶ID驗證
const genUid = () => {
  var length = 20
  var soupLength = genUid.soup_.length
  var id = []
  for (var i = 0; i < length; i++) {
    id[i] = genUid.soup_.charAt(Math.random() * soupLength)
  }
  return id.join('')
}
genUid.soup_ = '!#$%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
genUid() // ;l`yCPc9A8IuK}?N6,%}


//   一行代碼去重數組   一行代碼去重數組   一行代碼去重數組
const list = [1, 1, 2,26,2,2,2,2,2,2, 3, 6, 45, 8, 5, 4, 6, 5]
const uniqueList = [...new Set(list)] 
console.log("uniqueList",uniqueList)// [1, 2, 3, 6, 45, 8, 5, 4]

暫時就這些，以後再補充。不完全是我自己寫的，也有的是別人那弄來的。