前端开发日常归纳

此文档主要记录个人开发过程中所经常使用的小技巧

原生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;
}

持续更新中…

@快乐是一切