资源推荐
https://github.com/TigerHee/shareJS js相关知识
https://juejin.cn/post/6844903764864811022 promise封装
半透明边框 - CSS Tricks
https://react.iamkasong.com/
https://v4.webpack.docschina.org/concepts/
https://tangjiusheng.com/vue/155.html?csdn //vue插件汇总
http://www.jspang.com/ //vue3.0
https://www.lodashjs.com/ //试用学习平台
1.js原生日期格式化
Date.prototype.format = function(format) {
//eg:format="yyyy-MM-dd hh:mm:ss";
if (!format) {
format = 'yyyy-MM-dd hh:mm:ss';
}
var o = {
'M+': this.getMonth() + 1, // month
'd+': this.getDate(), // day
'H+': this.getHours(), // hour
'h+': this.getHours(), // hour
'm+': this.getMinutes(), // minute
's+': this.getSeconds(), // second
'q+': Math.floor((this.getMonth() + 3) / 3), // quarter
S: this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var 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;
};
//使用
new Date(value).format('yyyy年MM月dd日 HH:mm')
2.获取地址栏参数方法
function() {
var url = window.location.href
if (url.split('?').length > 1) {
var params = url.split('?')[1].split('&')
var obj = {}
params.map((v) => (obj[v.split('=')[0]] = v.split('=')[1]))
return obj
} else {
return
}
}
//第二种方法
var url = new URL('http://localhost:8000/news?a=1&b=2&c=3');
var searchParams = url.searchParams;
for (let key of searchParams.keys()){
console.log('====');
console.log('key === ', key);
console.log('value === ', searchParams.get(key))
}
3.校验身份证号码
function checkIDCard(idcode) {
// 加权因子
var weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
// 校验码
var check_code = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
var code = idcode + "";
var last = idcode[17]; //最后一位
var seventeen = code.substring(0, 17);
// ISO 7064:1983.MOD 11-2
// 判断最后一位校验码是否正确
var arr = seventeen.split("");
var len = arr.length;
var num = 0;
for (var i = 0; i < len; i++) {
num = num + arr[i] * weight_factor[i];
}
// 获取余数
var resisue = num % 11;
var last_no = check_code[resisue];
// 格式的正则
// 正则思路
/*
第一位不可能是0
第二位到第六位可以是0-9
第七位到第十位是年份，所以七八位为19或者20
十一位和十二位是月份，这两位是01-12之间的数值
十三位和十四位是日期，是从01-31之间的数值
十五，十六，十七都是数字0-9
十八位可能是数字0-9，也可能是X
*/
var idcard_patter =
/^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
// 判断格式是否正确
var format = idcard_patter.test(idcode);
// 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
return last === last_no && format ? true : false;
}
4.css文字超出就显示省略号
//1，css超出一行用点表示
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
//2，css超出二行用点表示
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
5.img标签（非背景）充满父盒子不变形
width: 100%;
height: 100%;
object-fit: cover;
6.数组元素为对象的去重：
[...new Set(arr.map(v => JSON.stringify(v)))].map(v => JSON.parse(v))
7.数组求和：
var arr = [1,2,3,4,5];
method 1:
var sum = eval(arr.join('+'));
method 2:
var sum = arr.reduce((prev,cur) => prev + cur);
8.react拖拽功能实现
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
//事件
reOrder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
onDragEnd = (result) => {
// dropped outside the list
if (!result.destination) {
return;
}
const items = this.reOrder(
this.state.items,
result.source.index,
result.destination.index
);
this.setState({
items
});
}
//this.state.data
effectImg:[
{uid: "old0", status: "done",url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201127/2011271332065724.jpg"},
{uid: "old1", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201127/2011271332242932.jpg"},
{uid: "old2", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546062275.jpeg"},
{uid: "old3", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546062468.jpeg"},
{uid: "old4", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546062990.jpeg"},
{uid: "old5", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546063466.jpeg"},
{uid: "old6", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546065223.jpeg"},
{uid: "old7", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546065186.jpeg"},
{uid: "old8", status: "done", url: "https://house-pro-shanghai-1258778894.cos.ap-shanghai.myqcloud.com/20201130/2011301546068217.jpg"},
]
//-----
const grid = 8;
// 垂直样式
// const getItemStyle = (isDragging, draggableStyle) => ({
// // some basic styles to make the items look a bit nicer
// userSelect: "none",
// padding: grid * 2,
// margin: `0 0 ${grid}px 0`,
//
// // change background colour if dragging
// background: isDragging ? "lightgreen" : "grey",
//
// // styles we need to apply on draggables
// ...draggableStyle
// });
// const getListStyle = isDraggingOver => ({
// background: isDraggingOver ? "lightblue" : "lightgrey",
// padding: grid,
// width: 250,
// });
// 水平样式
const getItemStyle = (isDragging, draggableStyle) => ({
userSelect: 'none',
background: isDragging ? 'lightgreen' : 'grey',
...draggableStyle,
width: '100px',
height: '100px',
marginRight: '10px'
});
const getListStyle = isDraggingOver => ({
display: 'flex',
// width: '1000px',
});
//使用部分：
{ this.onDragEnd(e, 'img1') }}>
{(provided, snapshot) => (
{this.state.effectImg.map((item, index) => (
{(provided, snapshot) => (
)}
))}
{provided.placeholder}
)}
9.正则相关：
// input输入框限制只能输入正整数
regNum(inputNumber, data) {
if (inputNumber.length == 1) {
this.ruleForm[data] = inputNumber.replace(/[^1-9]/g, '')
} else {
this.ruleForm[data] = inputNumber.replace(/\D/g, '')
}
}