常用的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]

暂时就这些，以后再补充。不完全是我自己写的，也有的是别人那弄来的。