这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
文本溢出
单行文本溢出
width:300px;
white-space: nowrap; // 文本不会换行。
overflow: hidden; // 溢出多余裁剪
text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。
多行文本溢出
display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; // 用来限制在一个块元素显示的文本的行数，根据需要写。
overflow: hidden; // 溢出多余裁剪
localStorage存取对象
localStorage.setItem("Key-name",JSON.stringify(this.object)) //存
let abc = localStorage.getItem("Key-name"); //取
abc = JSON.parse(abc); //转换
console.log(abc.id) //获取值
css常用操作
div上下左右居中
// 整个div定位
position: absolute;
left: 50%;
top: 50%;
// 根据自身div大小偏移
transform: translate(-50%, -50%);
常用选择器
css五种通用字体
margin合并
在垂直方向上，如果出现两个挨着的margin，结果会只显示一个margin，取较大的那个
box-sizing: border-box;
默认：
border-box：
Flexibility
flex-grow有剩余空间时的伸展能力flex-shrink容器空间不足时收缩的能力flex-basis没有伸展或收缩时的基础长度 flex有三个参数，可以简写flex：flex-grow flex-shrink flex-basis
js动态设置rem
vue2
mounted() {
// 获取初始浏览器宽度和屏幕宽度
this.lastClientWidth = document.documentElement.clientWidth
this.lastScreenWidth = window.screen.availWidth
// 根据初始浏览器宽度设置font-size大小
document.getElementsByTagName('html')[0].style.fontSize = this.lastClientWidth / 120 + 'px'
// 监听屏幕调整
window.addEventListener('resize', this.handleWindow, true)
},
methods: {
// 检测页面缩放，缩放后页面居中显示
handleWindow() {
var screenWidth = window.screen.availWidth
var currClientWidth = document.documentElement.clientWidth
console.log(screenWidth + '-------' + currClientWidth)
var html_ = document.getElementsByTagName('html')[0]
const a = document.getElementById('app')
if (currClientWidth <= screenWidth && currClientWidth + 50 > screenWidth) {
// 浏览器宽度大约等于屏幕宽度时
html_.style.fontSize = currClientWidth / 120 + 'px'
a.style.width = currClientWidth + 'px'
} else if (currClientWidth > screenWidth) {
// 浏览器宽度大于屏幕宽度时
html_.style.fontSize = screenWidth / 120 + 'px'
a.style.width = screenWidth + 'px'
} else {
// 还有放大跟手动调整浏览器大小没写，暂时不知道怎么判断，先放着吧
console.log(document.body.scrollWidth)
}
a.style.margin = '0 auto'
},
},
vue3
setup() {
// 监听屏幕调整
window.addEventListener('resize', handleWindow)
function handleWindow() {
var currClientWidth =document.documentElement.clientWidth
console.log(currClientWidth)
var html_ = document.getElementsByTagName('html')[0]
html_.style.fontSize = currClientWidth / 120 + 'px'
}
watchEffect(() => {
handleWindow()
})
return {
handleWindow,
}
},
JSON和JS对象相互转换
JSON ==> javascript //JSON反序列化
var jsonStr = '{"a": "Hello", "b": "world"}'
var obj = JSON.parse(jsonStr)
javascript ==> JSON //JSON序列化
var obj = { a: 'hello', b: 'world', c: false }
var str = JSON.stringify(obj)
xhr上传文件
//xhr上传文件完整示例
<body>
<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<!-- 3. img 标签，来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
<script>
// 1. 获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3. 获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件，添加到 FormData 中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// 计算出上传的进度
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete)
}
}
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) {
// 上传成功
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else {
// 上传失败
console.log('图片上传失败！' + data.message)
}
}
}
})
</script>
</body>
Echars简单概念
在 ECharts 中的组件很多，例如在后续内容中我们可能遇到，xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。
为了帮助同学们理解这些概念，我们看一看下图内容～
var和let的区别
| var | let | |
|---|---|---|
| 变量提升 | 是 | 否 |
| 作用域 | 函数作用域 | 块级作用域 |
| 作为全局变量时，是否成为window属性 | 是 | 否 |
| 是否可以重复声明 | 是 | 否 |
※ const 和 let 基本相同
js给对象排序
//按对象的其中⼀个值来给对象排序
let zhang = {
name : "zhang",
age : 18,
face :"handsome"
}
let wang = {
name : "wang" ,
age : 21,
face : "amazing"
}
let guo = {
name : "guo" ,
age : 20,
face :"beautiful"
}
//思路，通过age来排序，将对象放在⼀个数组⾥⾯
let arr = [zhang , wang ,guo];
arr.sort(function(next,cur){
return next.age - cur.age;
});
console.log(arr);
/*
在这⾥强调：arr.sort()是⼀个排序⽅法（冒泡排序）⾥⾯留了⼀个function接⼝，必须⼀次性传两个参数
它的排序规则是看返回值
1）当返回值为负数时，两数交换 (降序)
2）当返回值为正数时，不变 (升序)
3）当返回值为0时，那么两个数的位置不变
*/
for-in & for-of
for-in: 取key，index
for-of：取value
常用正则表达式
校验数字的表达式
- 数字： ^[0-9]*$
- n位的数字： ^\d{n}$
- 至少n位的数字 ：^\d{n,}$
- m-n位的数字： ^\d{m,n}$
- 零和非零开头的数字： ^(0|1-9*)$
- 非零开头的最多带两位小数的数字： ^(1-9*)+(.[0-9]{1,2})?$
- 带1-2位小数的正数或负数： ^(-)?\d+(.\d{1,2})$
- 正数、负数、和小数： ^(-|+)?\d+(.\d+)?$
- 有两位小数的正实数： ^[0-9]+(.[0-9]{2})?$
- 有1~3位小数的正实数： ^[0-9]+(.[0-9]{1,3})?$
- 非零的正整数： ^[1-9]\d 或 ^([1-9](#)*){1,3} 或 ^+?1-9$**
- 非零的负整数： ^-1-90-9"*
- 非负整数： ^\d+
- 非正整数： ^-[1-9]\d|0*
- 非负浮点数： ^\d+(.\d+)?
- 非正浮点数： ^((-\d+(.\d+)?)|(0+(.0+)?))
- 正浮点数： ^[1-9]\d.\d|0.\d*[1-9]\d* 或 ^(([0-9]+.[0-9]*[1-9](#)*)|([0-9]*[1-9](#)*.[0-9]+)|([0-9]*[1-9](#)*))**
- 负浮点数： ^-([1-9]\d.\d|0.\d*[1-9]\d*) 或 ^(-(([0-9]+.[0-9]*[1-9](#)*)|([0-9]*[1-9](#)*.[0-9]+)|([0-9]*[1-9](#)*)))**
- 浮点数： ^(-?\d+)(.\d+)?
校验字符的表达式
- 汉字： ^[\u4e00-\u9fa5]{0,}$
- 英文和数字： ^[A-Za-z0-9]+
- 长度为3-20的所有字符： ^.{3,20}$
- 由26个英文字母组成的字符串： ^[A-Za-z]+$
- 由26个大写英文字母组成的字符串： ^[A-Z]+$
- 由26个小写英文字母组成的字符串： ^[a-z]+$
- 由数字和26个英文字母组成的字符串： ^[A-Za-z0-9]+$
- 由数字、26个英文字母或者下划线组成的字符串： ^\w+
- 中文、英文、数字包括下划线： ^[\u4E00-\u9FA5A-Za-z0-9_]+$
- 中文、英文、数字但不包括下划线等符号： ^[\u4E00-\u9FA5A-Za-z0-9]+
- 可以输入含有^%&',;=?"等字符： **[^%&',;=?\x22]+**
- 禁止输入含有
的字符： **[^]+**
特殊需求表达式
-
Email地址： ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
-
InternetURL： [a-zA-z]+://\s 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$**
-
手机号码： ^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
-
电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)： ^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
-
国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
-
电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)
-
身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X： (^\d{15})|(^\d{17}(\d|X|x)$)
-
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)： ^a-zA-Z{4,15}$
-
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)： ^[a-zA-Z]\w{5,17}$
-
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)： ^(?=.\d)(?=.[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
-
强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)： ^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
-
日期格式： ^\d{4}-\d{1,2}-\d{1,2}
-
一年的12个月(01～09和1～12)： ^(0?[1-9]|1[0-2])$
-
一个月的31天(01～09和1～31)： ^((0?[1-9])|((1|2)[0-9])|30|31)$
-
钱的输入格式：
- 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"： ^1-9*$
- 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式： ^(0|1-9*)$
- 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号： ^(0|-?1-9*)$
- 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分： ^[0-9]+(.[0-9]+)?$
- 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的： ^[0-9]+(.[0-9]{2})?$
- 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样： ^[0-9]+(.[0-9]{1,2})?$
- 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样： ^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
- 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须： ^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
- 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
-
xml文件： ^([a-zA-Z]+-?)+[a-zA-Z0-9]+.x|X[l|L]$
-
中文字符的正则表达式： [\u4e00-\u9fa5]
-
双字节字符： [^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
-
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
-
HTML标记的正则表达式： <(\S?)>>.?|<.? /> ( 首尾空白字符的正则表达式：^\s*|\s*) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)**
-
腾讯QQ号：1-9{4,} (腾讯QQ号从10000开始)
-
中国邮政编码： [1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
-
IPv4地址： ((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}
