1. 前言
1.整理一下 自己平常工作中用到的一些JS工具
2. 随机色
2.1 rgb的形式
当然也可以使用
rgba
const randomColor = ()=> {
var r = randomNumber(0, 255);
var g = randomNumber(0, 255);
var b = randomNumber(0, 255);
return `rgb(${r},${g},${b})`;
}
2.2 十六进制颜色
颜色嘛 英文穷举不合适 ,那就 十六进制随机数
const randomColor = ()=>{
return "#" + Math.floor(Math.random()* 0xffffff).toString()
}
3. RGB转为 HEX
const rgbToHex = (r,g,b)=>{
const toHex = num=>{
const hex = num.toString(16)
return hex.length === 1 ? `0${hex}` :hex
}
return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}
4.日期格式化 -1
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
根据自己的需求灵活变化就行
4.2 时间格式化 -2
export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero (str) {
return ('00' + str).substr(str.length)
}
4.3 时间格式化无符号拼接
export function nosignDateTime (date) {
var datetime = transferDateTime(date)
datetime = datetime.replace(/:/g, '').replace(/-/g, '').replace(/ /g, '')
datetime = parseInt(datetime)
return datetime
}
5. 返回最小日期
const getMinDate = dates => {
if (!dates) {
throw new Error('参数类型不匹配!')
}
if (!dates.length) {
return dates
}
return new Date(Math.min.apply(null, dates)).toISOString()
}
参数是日期数组
6. 判断yyyy-MM-dd hh:mm:ss格式
正则表达式
export function validateDateTime (testdate) {
var dateRegex = /((19|20)[0-9]{2})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01]) ([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]/
var res = dateRegex.test(testdate)
if (res) {
var ymd = testdate.match(/(\d{4})-(\d+)-(\d+).*/)
var year = parseInt(ymd[1])
var month = parseInt(ymd[2])
var day = parseInt(ymd[3])
if (day > 28) {
// 获取当月的最后一天
var lastDay = new Date(year, month, 0).getDate()
return (lastDay >= day)
}
return true
}
return false
}
7. 比较时间大小
compareTime(beginTime, endTime) {
var beginTimes = beginTime.replace(/-/g, "/");
var endTimes = endTime.replace(/-/g, "/");
var a = (Date.parse(endTimes) - Date.parse(beginTimes)) / 3600 / 1000;
if (a < 0) {
console.log("endTime小!");
} else if (a > 0) {
console.log("endTime大!");
} else if (a == 0) {
console.log("相等!");
}
return a;
},
8.数字补0
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
padStart
// '010'
"10".padStart(3,0)
//'10a'
"10".padEnd(3,"a")
参数1: 字符串长度
参数2: 字符串长度不够用 指定字符进行补充
padEnd末尾补充
9.数组去重
const quChong = (arr)=>{
return [...new Set(arr)]
}
10. 数组打乱顺序
const disorderArr = array => {
if (!Array.isArray(array)) {
throw new Error('参数不匹配')
}
let end = array.length
if (!end) {
return array
}
while (end) {
let start = Math.floor(Math.random() * end--)
;[array[start], array[end]] = [array[end], array[start]]
}
return array
}
参数:数组类型的数组
10.2 数组打乱顺序 -简洁
let arr = [32,6,4,'😄',true,'666',false,'2022年5月30号']
arr = arr.sort(()=>0.5-Math.random())
- 数组自带的排序
- 随机数
11. 查找在数组中的位置
/**
*
* @param arr
* @param str 查找在数组中的位置
* @returns {number}
*/
arrayIndexOf =(arr, str)=> {
// 如果可以的话，调用原生方法
if (arr && arr.indexOf) {
return arr.indexOf(str);
}
var len = arr.length;
for (var i = 0; i < len; i++) {
// 定位该元素位置
if (arr[i] == str) {
return i;
}
}
// 数组中不存在该元素
return -1;
}
12. 数组随机生产一个值
let arr = [32,6,4,'😄',true,'666',false,'2022年5月30号']
const randomElement = (arr)=>arr[Math.floor(Math.random()*arr.length)]
randomElement(arr)
13. 文件尺寸格式化
const formatSize = size => {
if (typeof +size !== 'number') {
throw new Error('参数不对 !')
}
const unitsHash = 'B,KB,MB,GB'.split(',')
let index = 0
while (size > 1024 && index < unitsHash.length) {
size /= 1024
index++
}
return Math.round(size * 100) / 100 + unitsHash[index]
}
formatSize('10240') // 10KB
formatSize('10240000') // 9.77MB
14.连字符转驼峰
const toCamelCase = (str = '', separator = '-') => {
if (typeof str !== 'string') {
throw new Error('参数类型不对')
}
if (str === '') {
return str
}
const newExp = new RegExp('\\-\(\\w\)', 'g')
return str.replace(newExp, (matched, $1) => {
return $1.toUpperCase()
})
}
toCamelCase('java-script')//javaScript'
15.驼峰转连字符
const fromCamelCase = (str = '', separator = '-') => {
if (typeof str !== 'string') {
throw new Error('参数类型不对')
}
if (str === '') {
return str
}
return str.replace(/([A-Z])/g, `${separator}$1`).toLowerCase()
}
fromCamelCase('javaScript') // java-script
16. 深浅拷贝
17. Unicode转中文
export function unicodeToChinese (str) {
return unescape(str.replace(/&#x/g, '%u').replace(/;/g, ''))
}
18. 浏览器高度
const clientHeight = ()=> {
return window.innerHeight || document.documentElement.clientHeight;
}
19.上滚动距离 文档滚动的高度
const getScroTop = ()=> {
return document.documentElement.scrollTop;
}
20. 元素距离顶部距离
const getoffsetTop = ele=> {
var top = 0;
while (true) {
top = top + ele.offsetTop + ele.offsetParent.clientTop;
ele = ele.offsetParent;
// ele是body 的时候 ,就到顶了
if (ele.offsetParent == null) {
break;
}
}
return top;
}
21. 手机号中间四位 变为*
也就是脱敏处理
let phone = "186929398753"
//186****8753
phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2')
参考资料
部分代码是在网上搜索,根据我自己的开发需求进行了修改,但是时间久了也忘记在哪看的😭😭,如有侵权,请告知 我会删除
网友评论