js常用代码

发表于 | 分类于 | |

返回指定范围的随机数(m-n之间)的公式

1
2
3
4
5
6
function random(m, n) {
  return Math.random() * (n-m) + m;
}
// example
random(3, 5); // 4.680004527528821

rem布局（动态设置html根节点font-size大小）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function (doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  function recalc() {
    var clientWidth = docEl.clientWidth>540 ? 540 : docEl.clientWidth; // 控制最大宽度为540px
    if (!clientWidth) return;
    //此处的100为页面html设置的字体大小值（为方便计算一般用100px）
    //此处的320为视觉稿宽度的一半
    //根据设备可视区的宽度以及设备像素比动态改变fontSize值
    docEl.style.fontSize = 100 * (clientWidth  / 320) + 'px';
  };
  recalc();
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  if (doc.readyState === 'complete') {
    recalc();
  } else {
      doc.addEventListener('DOMContentLoaded', recalc, false);
  }
})(document, window);

字符串超过指定长度的部分用’…’代替

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function cutstr(str, len) {
  var temp,
    icount = 0,
    patrn = /[^\x00-\xff]/,
    strre = "";
  for (var i = 0; i < str.length; i++) {
    if (icount < len - 1) {
      temp = str.substr(i, 1);
      if (patrn.exec(temp) == null) {
        icount = icount + 1;
      } else {
        icount = icount + 2;
      }
      strre += temp;
    } else {
      break;
    }
  }
  return strre + "...";
}
// example
cutstr('abcdefghijk', 3); // "ab..."

替换全部

1
2
3
4
5
6
String.prototype.replaceAll = function(s1, s2) {
  return this.replace(new RegExp(s1, "gm"), s2);
}
// example
'abbcdbbbeeff'.replaceAll('bb', '**'); // "a**cd**beeff"

清除左右空格

1
2
3
4
5
6
7
String.prototype.trim = function() {
  var reExtraSpace = /^\s*(.*?)\s+$/;
  return this.replace(reExtraSpace, "$1");
}
// example
'   abcd  ef  '.trim(); // "abcd  ef"

清除左空格/右空格

1
2
3
4
5
6
7
8
9
10
11
function ltrim(s) {
  return s.replace(/^(\s*|　*)/, "");
}
function rtrim(s) {
  return s.replace(/(\s*|　*)$/, "");
}
// example
ltrim('  abcd  ef  '); // "abcd  ef  "
rtrim('  abcd  ef  '); // "  abcd  ef"

判断是否以某个字符串开头

1
2
3
4
5
6
7
String.prototype.startWith = function(s) {
  return this.indexOf(s) === 0;
}
// example
'abcdef'.startWith('ab'); // true
'abcdef'.startWith('bc'); // false

判断是否以某个字符串结束

1
2
3
4
5
6
7
8
String.prototype.endWith = function(s) {
  var d = this.length - s.length;
  return (d >= 0 && this.lastIndexOf(s) == d);
}
// example
'abcdef'.endWith('ef'); // true
'abcdef'.endWith('de'); // false

转义html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function encodeHtml(s) {
  var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
  var s = (s != undefined) ? s : this.toString();
  return (typeof s != "string") ? s :
    s.replace(REGX_HTML_ENCODE,
      function($0) {
        var c = $0.charCodeAt(0),
          r = ["&#"];
        c = (c == 0x20) ? 0xA0 : c;
        r.push(c);
        r.push(";");
        return r.join("");
      });
}
// example
encodeHtml('<a>哈哈哈哈哈哈</a>'); // "&#60;a&#62;哈哈哈哈哈哈&#60;/a&#62;"

反转义html

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
function decodeHtml(s) {
  var HTML_DECODE = {
    "<": "<",
    ">": ">",
    "&": "&",
    " ": " ",
    '"': '\"',
    "©": ""
    // Add more
  };
  var REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
  var s = (s != undefined) ? s : this.toString();
  return (typeof s != "string") ? s :
    s.replace(REGX_HTML_DECODE,
      function($0, $1) {
        var c = HTML_DECODE[$0];
        if (c == undefined) {
          // Maybe is Entity Number
          if (!isNaN($1)) {
            c = String.fromCharCode(($1 == 160) ? 32 : $1);
          } else {
            c = $0;
          }
        }
        return c;
      });
}
// example
decodeHtml("&#60;a&#62;哈哈哈哈哈哈&#60;/a&#62;"); // "<a>哈哈哈哈哈哈</a>"

时间日期格式转换

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
Date.prototype.Format = function(formatStr) {
  var str = formatStr;
  var Week = ['日', '一', '二', '三', '四', '五', '六'];
  str = str.replace(/yyyy|YYYY/, this.getFullYear());
  str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
  str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
  str = str.replace(/M/g, (this.getMonth() + 1));
  str = str.replace(/w|W/g, Week[this.getDay()]);
  str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
  str = str.replace(/d|D/g, this.getDate());
  str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
  str = str.replace(/h|H/g, this.getHours());
  str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
  str = str.replace(/m/g, this.getMinutes());
  str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
  str = str.replace(/s|S/g, this.getSeconds());
  return str
}
// example
new Date().Format('YYYY/MM/DD'); // "2017/01/22"
new Date().Format('yyyy-MM-dd'); // "2017-01-22"
new Date().Format('hh:mm:ss'); // "10:31:19"
new Date().Format('yyyy-MM-dd hh:mm:ss'); // "2017-01-22 10:28:32"
new Date().Format('yyyy-MM-dd 星期w hh:mm:ss'); // "2017-01-22 星期日 10:29:29"

获得当前页面URL中GET参数值

1
2
3
4
5
6
7
8
9
10
11
12
13
function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// example url = 'www.baidu.com?a=123&b=&c=345'
getQueryString('a'); // "123"
getQueryString('b'); // ""
getQueryString('d'); // null

金额大写转换函数

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
function transform(tranvalue) {
  try {
    var i = 1;
    var dw2 = new Array("", "万", "亿"); //大单位
    var dw1 = new Array("拾", "佰", "仟"); //小单位
    var dw = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用
    //以下是小写转换成大写显示在合计大写的文本框中
    //分离整数与小数
    var source = splits(tranvalue);
    var num = source[0];
    var dig = source[1];
    //转换整数部分
    var k1 = 0; //计小单位
    var k2 = 0; //计大单位
    var sum = 0;
    var str = "";
    var len = source[0].length; //整数的长度
    for (i = 1; i <= len; i++) {
      var n = source[0].charAt(len - i); //取得某个位数上的数字
      var bn = 0;
      if (len - i - 1 >= 0) {
        bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字
      }
      sum = sum + Number(n);
      if (sum != 0) {
        str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面
        if (n == '0') sum = 0;
      }
      if (len - i - 1 >= 0) { //在数字范围内
        if (k1 != 3) { //加小单位
          if (bn != 0) {
            str = dw1[k1].concat(str);
          }
          k1++;
        } else { //不加小单位，加大单位
          k1 = 0;
          var temp = str.charAt(0);
          if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位
            str = str.substr(1, str.length - 1);
          str = dw2[k2].concat(str);
          sum = 0;
        }
      }
      if (k1 == 3) { //小单位到千则大单位进一
        k2++;
      }
    }
    //转换小数部分
    var strdig = "";
    if (dig != "") {
      var n = dig.charAt(0);
      if (n != 0) {
        strdig += dw[Number(n)] + "角"; //加数字
      }
      var n = dig.charAt(1);
      if (n != 0) {
        strdig += dw[Number(n)] + "分"; //加数字
      }
    }
    str += "元" + strdig;
  } catch (e) {
    return "0元";
  }
  return str;
}
//拆分整数与小数
function splits(tranvalue) {
  var value = new Array('', '');
  temp = tranvalue.toFixed(2).split(".");
  for (var i = 0; i < temp.length; i++) {
    value = temp;
  }
  return value;
}
// example
transform(3333); // "叁仟叁佰叁拾叁元"
transform(3333.3455); // "叁仟叁佰叁拾叁元叁角伍分"
transform(333456762.32); // "叁亿叁仟叁佰肆拾伍万陆仟柒佰陆拾贰元叁角贰分"
transform(32323423423.3455); // transform(32323423423.3455);

判断一个对象是否为空对象

1
2
3
4
5
6
7
8
9
10
function isEmptyObject(obj) {
  for(var i in obj) {
    return false;
  }
  return true;
}
// example
isEmptyObject({}); // true
isEmptyObject({a: 3}); // false

获取数组中的最小最大值

1
2
3
4
5
6
7
8
9
10
11
function smallest(array){
  return Math.min.apply(Math, array);
}
function largest(array){
  return Math.max.apply(Math, array);
}
// example
smallest([1, 2, 3, 0, 0, 1]); // 0
largest([1, 2, 3, 0, 0, 1]); // 3

判断两个小数是否相等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//因为javascript数字通常被输入为十进制的浮点数，但内部却被表示为二进制，所以计算结果会有偏差：
// 首先看下面的几个例子
0.1 + 0.2; // 0.30000000000000004
1.2 - 0.1; // 1.0999999999999999
0.1 + 0.2 === 0.3; // false
//所以我们不应该直接比较非整数，而是取其上限，把误差计算进去
//这样一个上限称为 machine epsilon，双精度的标准epsilon值是2^-53
const EPSILON = Math.pow(2, -53); //1.1102230246251565e-16
function epsEqu(x, y) {
  return Math.abs(x - y) < EPSILON;
}
// example
epsEqu(0.1+0.2, 0.3); // true

上传图片预览功能

1
2
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
1
2
3
4
5
6
7
8
9
10
function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}

cookie操作

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
// 设置cookie
function setCookie(c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" +escape(value) + ((expiredays==null) ? "" : ";expires=" + exdate.toGMTString());
}
// 获取cookie
function getCookie(c_name) {
  if (document.cookie.length>0) {
    var c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      var c_end = document.cookie.indexOf(";",c_start);
      if (c_end == -1) c_end = document.cookie.length;
      return unescape(document.cookie.substring(c_start,c_end));
    }
  }
  return "";
}
// example
setCookie('name', 'zhangsan', 7);
getCookie('name');  // "zhangsan"
setCookie('name', 'zhangsan', -1);
getCookie('name');  // ""

参考链接：
原生JavaScript技巧大收集100
js常用代码
不定期更新JavaScript技巧

坚持原创技术分享，您的支持将鼓励我继续创作！