javascript常用操作
# 通过鼠标坐标获取当前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
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
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
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
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
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
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
打印事件：
- window.onbeforeprint()--打印之前做的事,在页面即将打印时触发 (在打印窗口出现前)。
- window.onafterprint()--打印之后做的事
给使用的元素加上 page-break-inside: avoid; 来解决分页截断问题
上次更新: 2022/09/09, 13:09:00