此文档主要记录个人开发过程中所经常使用的小技巧
原生js发送请求
function ajax({url, data, type, success, error=(res)=>{}}) {
let xmlHttp
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest()
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
xmlHttp.open(type,url)
xmlHttp.setRequestHeader('Content-Type','application/json')
xmlHttp.send(JSON.stringify(data))
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
let res = xmlHttp.responseText
success(JSON.parse(res))
}
if (xmlHttp.readyState == 4 && xmlHttp.status != 200) {
let res = xmlHttp.responseText
error(JSON.parse(res))
}
}
}
快速生成数组
1、生成0到指定数字的数组
Array.from(Array(5), (v, k) => k) // [0, 1, 2, 3, 4]
2、指定长度空白数组
new Array(10)
元素垂直居中
<div class="out">
<div class="in"></div>
</div>
1、使用伪类元素居中
.in:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
2、利用flex和margin实现垂直居中。
.out {
display: flex;
}
.in {
margin: auto;
}
生成随机id
funtion randomId (cLen = 6) {
let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'
let max = chars.length
let rId = ''
for (var i = 0; i < cLen; i++) {
let r = parseInt(Math.random() * max)
rId += chars[r]
}
return rId
}
randomId(3) // NAm
判断鼠标指的方向
在某个div中,鼠标相对div的中心点所指向的方向
// 中心点坐标
this.bars.direction.x = this.$refs.vc.offsetWidth / 2
this.bars.direction.y = this.$refs.vc.offsetHeight / 2
this.bars.direction.l = this.$refs.vc.getBoundingClientRect().x
this.bars.direction.t = this.$refs.vc.getBoundingClientRect().y
let self = this
// 监听鼠标移动事件
let position = ''
this.$refs.vc.onmousemove = function (e) {
// 获取鼠标点击位置的坐标系
let l = e.pageX - self.bars.direction.l
let t = e.pageY - self.bars.direction.t
let x1 = l - self.bars.direction.x
let y1 = self.bars.direction.y - t
let c = Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2))
if (c >= 100 && (c <= self.bars.direction.y || (self.bars.direction.y - t) > 0)) {
let d = y1 / c
position = self.getBearing(x1, y1, d)
self.$refs.vc.style.cursor = `url(/@idevzs/common-video-player/imgs/mouse/${position}_line.png),auto`
}
}
参数说明
this.$refs.vc
是鼠标滑动判断的div,最终结果是实现鼠标在这个div上滑动的时候,滑到顶部鼠标指针改变为指向顶部的图标,滑道东南方指针改变为指向东南方的图标。
相关函数
getBearing (x1, y1, d) {
// 获取方位
let getD = (a) => { return Math.sin(a * Math.PI / 180) }
// 区分象限
if (x1 > 0 && y1 > 0) {
// 第一象限
/**
* a1 67.5 - 90
* a2 22.5 - 67.5
* a3 0 - 22.5
*/
if (getD(67.5) <= d && d < 1) return 'UP'
if (getD(22.5) <= d && d < getD(67.5)) return 'RIGHT_UP'
if (d >= 0 && d < getD(22.5)) return 'RIGHT'
}
if (x1 < 0 && y1 > 0) {
// 第二象限
/**
* a1 90 - 112.5
* a8 112.5 - 157.5
* a7 157.5 - 180
*/
if (getD(112.5) <= d && d < 1) return 'UP'
if (getD(157.5) <= d && d < getD(112.5)) return 'LEFT_UP'
if (d >= 0 && d < getD(157.5)) return 'LEFT'
}
if (x1 < 0 && y1 < 0) {
// 第三象限
/**
* a7 180 - 202.5
* a6 202.5 - 247.5
* a5 247.5 - 270
*/
if (getD(202.5) <= d && d < 0) return 'LEFT'
if (getD(247.5) <= d && d < getD(202.5)) return 'LEFT_DOWN'
if (d >= -1 && d < getD(247.5)) return 'DOWN'
}
if (x1 > 0 && y1 < 0) {
// 第四象限
/**
* a5 270 - 292.5
* a4 292.5 - 337.5
* a3 337.5 - 360
*/
if (d >= -1 && d < getD(292.5)) return 'DOWN'
if (getD(292.5) <= d && d < getD(337.5)) return 'RIGHT_DOWN'
if (getD(337.5) <= d && d < 0) return 'RIGHT'
}
// 在坐标轴上
if (x1 === 0 && y1 > 0) return 'UP'
if (x1 === 0 && y1 < 0) return 'DOWN'
if (x1 > 0 && y1 === 0) return 'RIGHT'
if (x1 < 0 && y1 === 0) return 'LEFT'
}
滚动条样式设置
::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。
::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner :边角,两个滚动条交汇处
::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
div中的内容分散对齐
div {
display: flex;
justify-content: space-between;
}
持续更新中…