WEB小技巧

一些平常会用到的小技巧

JS

  1. 限制输入两位小数并且只允许输入数字。
    1. <input v-mdel="a">
    2. 在 watch 里面监听 a:this.a = parseFloat(this.a.replace(/[^\d.]/g,"")).toFixed(2)
    3. <input type="text" onkeyup="this.value=this.value.toString().match(/^\d+(?:\.\d{0,2})?/)"/>
  2. js 取两位小数 不要四舍五入或四舍五入的方法(toFixed)
    1. 四舍五入 var num=123456.789; var num1=num.toFixed(2) // 123456.79
    2. 不四舍五入var num2=num.toFixed(3); num2.substring(0,num2.lastIndexOf('.')+3) // 123456.78
  3. js 导出表格 流转表格
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
31
32
33
34
35
36
37
38
39
function a(url, fileName) {
let xhr = new XMLHttpRequest();
xhr.responseType = "blob";
let _url = url;
xhr.open("GET", _url, true);
xhr.setRequestHeader(
"Authorization",
axios.defaults.headers.Authorization
);
xhr.onreadystatechange = function(e) {
if (this.readyState === 4) {
let response = this.response;
let URL = window.URL || window.webkitURL || window;
let link = document.createElement("a");
link.href = URL.createObjectURL(response);
link.download = filename + ".xls";
let event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
link.dispatchEvent(event);
}
};
xhr.send(null);
}
  1. js 计算库
    4 个用于执行高级数学计算的 JavaScript 库
    用 JavaScript 实现的一些计算公式

CSS

  1. 水平垂直居中的几种实现方式:
    17 种方式实现水平垂直居中
    5 种常用方式实现水平垂直居中

技巧

H5 图片的预览、旋转、上传

资料

编辑器

vscode

格式化和 eslint 冲突,beautify 文档,设置一下 beautify 的格式化设置。

Author: XavierShi
Link: https://blog.xaviershi.com/2018/11/26/WEB小技巧/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.