常用操作

# 通过鼠标坐标获取当前DOM对象

const x = event.pageX || event.clientX + document.body.scroolLeft;
const y = event.pageY || event.clientY + document.body.scrollTop;
const dom = document.elementFromPoint(x,y);

1
2
3

# 处理富文本内容中的图片地址为完整地址

const baseUrl = 'http://localhost'
const res = content.replace(/<(img [^>]*)src=['"]([^'"]+)['"]([^>]*)>/gi, function(match, p1, p2, p3){
  let url = (function (){
    if(!p2){
      return ''
    }
    if(p2.indexOf('http') === 0 || p2.indexOf('blob:') === 0){
      return p2
    } else if(p2.indexOf('/') === 0){
      return baseUrl + p2
    }
    return baseUrl + '/' + p2
  })();
  var newStr = `<${p1} src="${url}" ${p3}>`
  return newStr
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# input输入为金额，保留两位小数

/** 输入 */
function onkeyup (e) {
  value = value.replace(/[^\d\.]/g,'')    // 只能输入数字和小数点
    .replace(/^\./g,'')        // 过滤开头的小数点
    .replace(/\.{2,}/g,'.')    // 多个连续小数点合并为一个
    .replace('.','$#$').replace(/\./g,'').replace('$#$','.')  // 保留第一个小数点，删除其他的小数点
    .replace(/^0(\d+)/, '$1')  // 过滤开头的0
    .replace(/^(\d+)\.(\d\d).*$/, '$1.$2') // 保留两位小数
  return value
}

/** 失去焦点 */
function onblur (e) {
  value = value.replace(/[^\d\.]/g,'')    // 只能输入数字和小数点
    .replace(/^\./g,'')        // 过滤开头的小数点
    .replace(/\.{2,}/g,'.')    // 多个连续小数点合并为一个
    .replace('.','$#$').replace(/\./g,'').replace('$#$','.')  // 保留第一个小数点，删除其他的小数点
    .replace(/^0(\d+)/, '$1')  // 过滤开头的0
    .replace(/^(\d+)\.(\d\d).*$/, '$1.$2') // 保留两位小数

  // 输入0的时候转成空或者可自行调节 0.00 看需求
  if(input.value === '0'){
    input.value=''
  }
  // 把 123. 的数据转成 123
  if(input.value.split('.')[1]==''){ 
    input.value=input.value.split('.')[0]
  }
  return value
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 百度坐标转高德（传入经度、纬度）

function bd_decrypt(bd_lng, bd_lat) {
  var X_PI = Math.PI * 3000.0 / 180.0;
  var x = bd_lng - 0.0065;
  var y = bd_lat - 0.006;
  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
  var gg_lng = z * Math.cos(theta);
  var gg_lat = z * Math.sin(theta);
  return {lng: gg_lng, lat: gg_lat}
}

1
2
3
4
5
6
7
8
9
10

# 高德坐标转百度（传入经度、纬度）

function bd_encrypt(gg_lng, gg_lat) {
  var X_PI = Math.PI * 3000.0 / 180.0;
  var x = gg_lng, y = gg_lat;
  var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
  var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
  var bd_lng = z * Math.cos(theta) + 0.0065;
  var bd_lat = z * Math.sin(theta) + 0.006;
  return {
    bd_lat: bd_lat,
    bd_lng: bd_lng
  };
}

1
2
3
4
5
6
7
8
9
10
11
12

# 监听全屏事件

window.document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement) {
        console.log('进入全屏')
    } else {
        console.log('退出全屏')
    }
})

1
2
3
4
5
6
7

# 将div(页面元素)保存为图片

这里需要用到 html2canvas 库，下载库 https://www.npmjs.com/package/html2canvas (opens new window)

html2canvas(document.querySelector('#qr')).then(function(canvas){
    var imgData = canvas.toDataURL("image/png");
    var newData = imgData.replace(/^data:image\/png/, "data:application/octet-stream");
    const a = document.createElement('a')
    a.href = newData
    a.download = 'code.png'
    a.target = '_blank'
    a.click()
})

1
2
3
4
5
6
7
8
9

# 计算两个坐标点之间的直线距离

// 方法定义 lat,lng 
function GetDistance( lat1,  lng1,  lat2,  lng2){
    var radLat1 = lat1*Math.PI / 180.0;
    var radLat2 = lat2*Math.PI / 180.0;
    var a = radLat1 - radLat2;
    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
    s = s *6378.137 ;// EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000;
    return s;
}
// 调用 return的距离单位为km
GetDistance(10.0,113.0,12.0,114.0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 将Blob转为JSON

if (blob.type === 'application/json') {
    const reader = new FileReader()
    reader.readAsText(blob)
    reader.onload = () => {
        try {
            const res = JSON.parse(reader.result.toString())
            this.$message.error(res.msg)
        } catch (e) {
            this.$message.error(e.message)
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# 下载Blob格式文件

// blob转文件并下载
downloadFileByBlob(blob, fileName = "file") {
  let blobUrl = window.URL.createObjectURL(blob) // 主要使用该方法
  let link = document.createElement('a')
  link.download = fileName || 'defaultName'
  link.style.display = 'none'
  link.href = blobUrl
  // 触发点击
  document.body.appendChild(link)
  link.click()
  // 移除
  document.body.removeChild(link)
  window.URL.revokeObjectURL(blobUrl) 
}

// 调用
downloadFileByBlob(res.data, '活动策略数据表.xlsx')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 前端实现打印预览功能

window.print() 默认打印的body中的内容，也可以实现局部打印，就是将要打印的内容赋值给body然后再重新赋值还原


function doPrint(){
    //根据div标签ID拿到div中的局部内容
    bdhtml=window.document.body.innerHTML; 
    var jubuData = document.getElementById("printcontent").innerHTML;
    //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
    window.document.body.innerHTML= jubuData; 
    //调用打印功能
    window.print();
    window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
    return false;
}

1
2
3
4
5
6
7
8
9
10
11
12

打印事件：

window.onbeforeprint()--打印之前做的事,在页面即将打印时触发 (在打印窗口出现前)。
window.onafterprint()--打印之后做的事

给使用的元素加上 page-break-inside: avoid; 来解决分页截断问题

#javascript

上次更新: 2022/07/19, 15:07:00

← scss使用常见问题安利一个网页调试开发利器vConsole→