常用函数

获取十六进制随机颜色

function getRandomColor() {
  return '#' + (function(h) {
    return new Array(7 - h.length).join("0") + h;
  })((Math.random() * 0x1000000 << 0).toString(16));
}
getRandomColor();//"#272aba"

刷新当前页面

function refreash() {
  window.location.href = window.location.href;
}

数组中删除一个元素

function removeItem(arr, item) {
  var index = arr.indexOf(item);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}
remove([1, 2, 3], 3); //[1,2]

判断一个元素是否在一个数组中

function contains(arr, val) {
  return arr.indexOf(val) != -1 ? true : false;
}
contains([1, 2, 3], 3); //true

&#x 转汉字

function toChinese(str) {
  return unescape(str.replace(/&#x/g, "%u").replace(/;/g, ""));
}
toChinese("&#x5927"); //大

去除字符串中的汉字

function removeCN(str) {
  return str.replace(/[\u4e00-\u9fa5]/g, "");
}
removeCN("&#x搜索592是7"); //&#x5927

时间戳转换为时分秒

function timetrans(date) {
  var date = new Date(date * 1000); //如果date为13位不需要乘1000
  var Y = date.getFullYear() + "-";
  var M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
  var h =
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var m =
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":";
  var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
}
timetrans(1530366197); //2018-06-30 21:43:17

验证是否为数字

!> 使用 !isNaN() 和 parseFloat() 来检查参数是否是一个数字。使用 isFinite() 来检查数字是否是有限数。使用 Number() 来检查强制转换是否成立。

const validateNumber = n =>
  !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
validateNumber("10"); // true

将数字转化为千分位格式

!> 使用 toLocaleString() 将浮点数转换为 Decimal mark 格式。将整数部分转化为用逗号分隔的字符串。

const toDecimalMark = num => num.toLocaleString("en-US");
toDecimalMark(12305030388.9087); // "12,305,030,388.909"

获取 url 参数

const getURLParameters = url =>
  url
    .match(/([^?=&]+)(=([^&]*))/g)
    .reduce(
      (a, v) => (
        (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
      ),
      {}
    );
getURLParameters("http://url.com/page?name=Adam&surname=Smith"); // {name: 'Adam', surname: 'Smith'}

设置 url 参数

//setUrlPrmt({'a':1,'b':2})
//result：a=1&b=2
function setUrlPrmt(obj) {
  var _rs = [];
  for (var p in obj) {
    if (obj[p] != null && obj[p] != "") {
      _rs.push(p + "=" + obj[p]);
    }
  }
  return _rs.join("&");
}

使用 *遮蔽字符串

!> 用指定的掩码字符替换除最后 num 个字符以外的所有字符。
使用 String.slice( ) 获取需要被遮蔽的字符部分，并用正则表达式替换每个字符。将遮蔽的字符与字符串的其余未遮蔽部分拼接起来。省略第二个参数num，默认值为 4，也就是说最后 4 个字符不被遮蔽。如果num是负数，则不被遮蔽的字符将从字符串的开头算起。省略第三个参数 mask ，默认使用字符*作为掩码遮蔽。

const mask = (cc, num = 4, mask = "*") =>
  ("" + cc).slice(0, -num).replace(/./g, mask) + ("" + cc).slice(-num);
mask(1234567890); // '******7890'
mask(1234567890, 3); // '*******890'
mask(1234567890, -4, "$"); // '$$$$567890'

大写每个单词的首字母

!> 使用 String.replace()来匹配每个单词的第一个字符，并使用String.toUpperCase() 来将其大写。

const capitalizeEveryWord = str =>
  str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalizeEveryWord("hello world!"); // 'Hello World!'

精确到几位小数

!> 使用 Math.round() 和模板字面量将数字四舍五入为指定的小数位数。省略第二个参数 decimals ，数字将被四舍五入到一个整数。

const round = (n, decimals = 0) =>
  Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
round(1.005, 2); // 1.01

求数字或数组的和

!> 返回两个或两个以上数字 / 数字数组中元素之和。
使用 Array.reduce() 将每个值添加到累加器，并且累加器初始值为 0 。

const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);
sum(...[1, 2, 3, 4]); // 10
sum(1, 2, 3); //6

求数字或数组的平均值

!> 返回两个或两个以上数字的的平均值。
使用 Array.reduce() 将每个值累加到初始值 0 的累加器，除以数组长度 length 。

const average = (...nums) =>
  [...nums].reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2

确保函数只被调用一次。

!> 确保函数只被调用一次。
使用一个闭包，使用一个成为 called 的标志，并在第一次调用该函数时将其设置为 true ，以防止它被再次调用。为了允许函数改变它的 this 上下文（比如在一个事件监听器中），必须使用function 关键字，并且提供的函数必须应用上下文。允许使用 rest（剩余）/spread（展开） (…) 运算符为函数提供任意数量的参数。

const once = fn => {
  let called = false;
  return function(...args) {
    if (called) return;
    called = true;
    return fn.apply(this, args);
  };
};

const startApp = function(event) {
  console.log(this, event); // document.body, 鼠标事件
};
document.body.addEventListener("click", once(startApp)); // 只运行“StaspApp”一次点击

回到页面顶部

!> 平滑滚动到页面顶部。
使用 document.documentElement.scrollTop 或 document.body.scrollTop 获取到顶部距离。从顶部滚动一小部分距离。使用window.requestAnimationFrame() 来实现滚动动画。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

检测设备类型

!> 检测网站是否正在移动设备或台式机 / 笔记本电脑上打开。
使用正则表达式来测试 navigator.userAgent 属性以确定打开设备是移动设备还是台式机 / 笔记本电脑。

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "手机"
    : "电脑";
detectDeviceType(); // '电脑'

判断是否为微信

const isWeixin = function() {
  //判断是否是微信
  var ua = navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) == "micromessenger";
};
isWeixin(); //false

判断移动端系统

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  //判断是否是iOS
}
if (navigator.userAgent.match(/android/i)) {
  //判断是否是Android
}

获取当前页面 URL

!> 返回当前页面 URL。
使用 window.location.href 获取当前页面 URL。

const currentURL = () => window.location.href;
currentURL(); // 'https://google.com'

复制到剪贴板

!> 将一个字符串复制到剪贴板。仅作为用户操作的结果（即，在 click 事件侦听器中）。
创建一个新的 <textarea> 元素，用提供的数据填充它，并将其添加到 HTML 文档中。使用 Selection.getRangeAt() 来存储选择的范围（如果有的话）。使用 document.execCommand('copy')复制到剪贴板。从 HTML 文档中删除 <textarea> 元素。最后，使用 Selection().addRange() 来恢复原始选择范围（如果有的话）。

const copyToClipboard = str => {
  const el = document.createElement("textarea");
  el.value = str;
  el.setAttribute("readonly", "");
  el.style.position = "absolute";
  el.style.left = "-9999px";
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0
      ? document.getSelection().getRangeAt(0)
      : false;
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

cookie 操作

// 设置cookie
function setCookie(name, value) {
  const Days = 30; //一个月
  let exp = new Date();
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie =
    name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

// 获取cookie
function getCookie(name) {
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) {
    return arr[2];
  } else {
    return "";
  }
}

// 删除cookie
function delCookie(name) {
  let exp = new Date();
  exp.setTime(exp.getTime() - 1);
  let cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }
}

随机数生成

!>　随机返回一个范围的数字。参数是两个的时候，返回传入的两个参数的区间的随机函数；参数是一个的时候，返回 0 到这个数的随机函数；参数是零个的时候，返回 0 到 255 区间的整数

function randomNumber(n1, n2) {
  if (arguments.length === 2) {
    return Math.round(n1 + Math.random() * (n2 - n1));
  } else if (arguments.length === 1) {
    return Math.round(Math.random() * n1);
  } else {
    return Math.round(Math.random() * 255);
  }
}
randomNumber(5, 10); // 返回5-10的随机整数，包括5，10
randomNumber(10); // 返回0-10的随机整数，包括0，10
randomNumber(); // 返回0-255的随机整数，包括0，255

倒计时

function getEndTime(endTime) {
  var startDate = new Date(); //开始时间，当前时间
  var endDate = new Date(endTime); //结束时间，需传入时间参数
  var t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
  var d = 0,
    h = 0,
    m = 0,
    s = 0;
  if (t >= 0) {
    d = Math.floor(t / 1000 / 3600 / 24);
    h = Math.floor((t / 1000 / 60 / 60) % 24);
    m = Math.floor((t / 1000 / 60) % 60);
    s = Math.floor((t / 1000) % 60);
  }
  return "剩余时间" + d + "天 " + h + "小时 " + m + " 分钟" + s + " 秒";
}
getEndTime("2018/8/8 8:0:0"); // "剩余时间172天 12小时 10 分钟47 秒"

清除对象中值为空的属性

function filterParams(obj) {
  let _newPar = {};
  for (let key in obj) {
    if (
      obj[key] !== 0 &&
      obj[key] &&
      obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
    ) {
      _newPar[key] = obj[key];
    }
  }
  return _newPar;
}

filterParams({ a: 0, b: 1, c: "010", d: null, e: undefined, f: false });
// 当值等于0,null,undefined的时候，就会被过滤

去除字符串空格

//去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格
function trim(str, type) {
  switch (type) {
    case 1:
      return str.replace(/\s+/g, "");
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, "");
    case 3:
      return str.replace(/(^\s*)/g, "");
    case 4:
      return str.replace(/(\s*$)/g, "");
    default:
      return str.replace(/\s+/g, "");
  }
}

trim("a   a   dd ", 1); // "aadd"
trim("a   a   dd ", 2); // "a   a   dd"
trim("a   a   dd ", 3); // "a   a   dd "
trim(" a   a   dd ", 4); // " a   a   dd"

字符串循环复制

!>　前面的要循环的字符串，后面的要循环的次数

//前面的要循环的字符串，后面的要循环的次数
function repeatStr(str, count) {
  var text = "";
  for (var i = 0; i < count; i++) {
    text += str;
  }
  return text;
}
repeatStr("123", 4); // "123123123123"

检测字符串验证

!>　正则验证字符串

function checkType(str, type) {
  switch (type) {
    case "email": //邮箱
      return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
    case "phone": //手机
      return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
    case "tel": //电话
      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
    case "number": //数字
      return /^[0-9]$/.test(str);
    case "english": //英文
      return /^[a-zA-Z]+$/.test(str);
    case "chinese": //中文
      return /^[\u4E00-\u9FA5]+$/.test(str);
    case "lower": //小写
      return /^[a-z]+$/.test(str);
    case "upper": //大写
      return /^[A-Z]+$/.test(str);
    case "isIdCard": //身份证
      return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(
        str
      );
    case "isUrl": //是否是网址
      return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(
        str
      );
    default:
      return true;
  }
}

checkType("165226226326", "phone"); // false
checkType("[email protected]", "email"); // true

检测密码强度

// nowLv表示密码的强度
function checkPwd(str) {
  var nowLv = 0;
  if (str.length < 6) {
    return nowLv;
  }
  if (/[0-9]/.test(str)) {
    nowLv++;
  }
  if (/[a-z]/.test(str)) {
    nowLv++;
  }
  if (/[A-Z]/.test(str)) {
    nowLv++;
  }
  if (/[\.|-|_]/.test(str)) {
    nowLv++;
  }
  return nowLv;
}
checkPwd("123"); // 0
checkPwd("123ASHD"); // 2
checkPwd("12asdASAD"); // 3
checkPwd("123ASHD)(&!a_"); // 4

字符随机码

//这里的参数count必须是 2 ~ 36 之间的整数
function randomNumber(count) {
  return Math.random()
    .toString(count)
    .substring(2);
}
randomNumber(10); // "2584316588472575"
randomNumber(14); // "9b405070dd00122640c192caab84537"
Math.random()
  .toString(36)
  .substring(2); // "83vhdx10rmjkyb9"

查找字符串中某字符出现的次数

function countStr(str, strSplit) {
  return str.split(strSplit).length - 1;
}
var strTest =
  "sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967";
countStr(strTest, "blog"); // 6

检验字符串超出显示省略号

//检验字符串是否超过某个值，超出出现省略号，这是超出省略的一种js的简单实现。
function CutParagraph(name, size) {
  var newName;
  if (name.length > size) {
    newName = name.substring(0, size) + "...";
    return newName;
  } else {
    return name;
  }
}
CutParagraph("fujiawei", 5); // "fujia..."

找出最长单词

function longestWord(str, splitType) {
  var _splitType = splitType || /\s+/g,
    _max = 0,
    _item = "";
  var strArr = str.split(_splitType);
  strArr.forEach(function(item) {
    if (_max < item.length) {
      _max = item.length;
      _item = item;
    }
  });
  return { el: _item, max: _max };
}
//longestWord('Find the Longest word in a String')
//result：7
//longestWord('Find|the|Longest|word|in|a|String','|')
//result：7

数组去重

function removeRepeatArray(arr) {
  return arr.filter(function (item, index, self) {
    return self.indexOf(item) === index;
  });
  //es6
  //return Array.from(new Set(arr))
},

数组顺序打乱

function upsetArr(arr) {
  return arr.sort(function () {
    return Math.random() - 0.5
  });
},

数组最大值

//这一块的封装，主要是针对数字类型的数组
function maxArr(arr) {
  return return Math.max.apply(null, arr);
},

数组最小值

//这一块的封装，主要是针对数字类型的数组
function minArr(arr) {
  return Math.min.apply(null, arr);
},

筛选数组

//删除值为'val'的数组元素
//removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')
//result：["aaa"]   带有'test'的都删除
//removeArrayForValue(['test','test1','test2','test','aaa'],'test')
//result：["test1", "test2", "aaa"]  //数组元素的值全等于'test'才被删除

function removeArrayForValue(arr, val, type) {
  return arr.filter(function (item) {
    return type ? item.indexOf(val) === -1 : item !== val
  })
},

适配 rem

function getFontSize(_client) {
    var doc = document,
    win = window;
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize',
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
        if (clientWidth > _client) {
            clientWidth = _client
        }
        //设置根元素font-size大小
        docEl.style.fontSize = 100 * (clientWidth / _client) + 'px';
    };
    //屏幕大小改变，或者横竖屏切换时，触发函数
    win.addEventListener(resizeEvt, recalc, false);
    //文档加载完成时，触发函数
    doc.addEventListener('DOMContentLoaded', recalc, false);
},

生成随机颜色

function randomColor(_client) {
  return (
    "#" +
    Math.random()
      .toString(16)
      .substring(2)
      .substr(0, 6)
  );
}

现金额大写转换

//digitUppercase(123456) "壹拾贰万叁仟肆佰伍拾陆元整"
function digitUppercase(n) {
  var fraction = ["角", "分"];
  var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
  var unit = [["元", "万", "亿"], ["", "拾", "佰", "仟"]];
  var head = n < 0 ? "欠" : "";
  n = Math.abs(n);
  var s = "";
  for (var i = 0; i < fraction.length; i++) {
    s += (
      digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
    ).replace(/零./, "");
  }
  s = s || "整";
  n = Math.floor(n);
  for (var i = 0; i < unit[0].length && n > 0; i++) {
    var p = "";
    for (var j = 0; j < unit[1].length && n > 0; j++) {
      p = digit[n % 10] + unit[1][j] + p;
      n = Math.floor(n / 10);
    }
    s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
  }
  return (
    head +
    s
      .replace(/(零.)*零元/, "元")
      .replace(/(零.)+/g, "零")
      .replace(/^整$/, "零元整")
  );
}

数据类型判断

//ecDo.istype([],'array')  true
//ecDo.istype([]) '[object Array]'
function istype(o, type) {
  if (type) {
    var _type = type.toLowerCase();
  }
  switch (_type) {
    case "string":
      return Object.prototype.toString.call(o) === "[object String]";
    case "number":
      return Object.prototype.toString.call(o) === "[object Number]";
    case "boolean":
      return Object.prototype.toString.call(o) === "[object Boolean]";
    case "undefined":
      return Object.prototype.toString.call(o) === "[object Undefined]";
    case "null":
      return Object.prototype.toString.call(o) === "[object Null]";
    case "function":
      return Object.prototype.toString.call(o) === "[object Function]";
    case "array":
      return Object.prototype.toString.call(o) === "[object Array]";
    case "object":
      return Object.prototype.toString.call(o) === "[object Object]";
    case "nan":
      return isNaN(o);
    case "elements":
      return Object.prototype.toString.call(o).indexOf("HTML") !== -1;
    default:
      return Object.prototype.toString.call(o);
  }
}

手机类型判断

function browserInfo(type) {
  switch (type) {
    case "android":
      return navigator.userAgent.toLowerCase().indexOf("android") !== -1;
    case "iphone":
      return navigator.userAgent.toLowerCase().indexOf("iphone") !== -1;
    case "ipad":
      return navigator.userAgent.toLowerCase().indexOf("ipad") !== -1;
    case "weixin":
      return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
    default:
      return navigator.userAgent.toLowerCase();
  }
}

获取浏览器类型和版本

function getExplore() {
  var sys = {},
    ua = navigator.userAgent.toLowerCase(),
    s;
  (s = ua.match(/rv:([\d.]+)\) like gecko/))
    ? (sys.ie = s[1])
    : (s = ua.match(/msie ([\d\.]+)/))
      ? (sys.ie = s[1])
      : (s = ua.match(/edge\/([\d\.]+)/))
        ? (sys.edge = s[1])
        : (s = ua.match(/firefox\/([\d\.]+)/))
          ? (sys.firefox = s[1])
          : (s = ua.match(/(?:opera|opr).([\d\.]+)/))
            ? (sys.opera = s[1])
            : (s = ua.match(/chrome\/([\d\.]+)/))
              ? (sys.chrome = s[1])
              : (s = ua.match(/version\/([\d\.]+).*safari/))
                ? (sys.safari = s[1])
                : 0;
  // 根据关系进行判断
  if (sys.ie) return "IE: " + sys.ie;
  if (sys.edge) return "EDGE: " + sys.edge;
  if (sys.firefox) return "Firefox: " + sys.firefox;
  if (sys.chrome) return "Chrome: " + sys.chrome;
  if (sys.opera) return "Opera: " + sys.opera;
  if (sys.safari) return "Safari: " + sys.safari;
  return "Unkonwn";
}

获取操作系统类型

function getOS() {
  var userAgent =
    ("navigator" in window &&
      "userAgent" in navigator &&
      navigator.userAgent.toLowerCase()) ||
    "";
  var vendor =
    ("navigator" in window &&
      "vendor" in navigator &&
      navigator.vendor.toLowerCase()) ||
    "";
  var appVersion =
    ("navigator" in window &&
      "appVersion" in navigator &&
      navigator.appVersion.toLowerCase()) ||
    "";
  if (/mac/i.test(appVersion)) return "MacOSX";
  if (/win/i.test(appVersion)) return "windows";
  if (/linux/i.test(appVersion)) return "linux";
  if (
    /iphone/i.test(userAgent) ||
    /ipad/i.test(userAgent) ||
    /ipod/i.test(userAgent)
  )
    "ios";
  if (/android/i.test(userAgent)) return "android";
  if (/win/i.test(appVersion) && /phone/i.test(userAgent))
    return "windowsPhone";
}

获取滚动条距顶部的距离

function getScrollTop() {
  return (
    (document.documentElement && document.documentElement.scrollTop) ||
    document.body.scrollTop
  );
}

元素的距离顶部的位置

/**
 *
 * @desc  获取一个元素的距离文档(document)的位置，类似jQ中的offset()
 * @param {HTMLElement} ele
 * @returns { {left: number, top: number} }
 */
function offset(ele) {
  var pos = {
    left: 0,
    top: 0
  };
  while (ele) {
    pos.left += ele.offsetLeft;
    pos.top += ele.offsetTop;
    ele = ele.offsetParent;
  }
  return pos;
}

平滑滚动

/**
 *
 * @desc  在${duration}时间内，滚动条平滑滚动到${to}指定位置
 * @param {Number} to
 * @param {Number} duration
 */
function scrollTo(to, duration) {
  if (duration < 0) {
    setScrollTop(to);
    return;
  }
  var diff = to - getScrollTop();
  if (diff === 0) return;
  var step = (diff / duration) * 10;
  requestAnimationFrame(function() {
    if (Math.abs(step) > Math.abs(diff)) {
      setScrollTop(getScrollTop() + diff);
      return;
    }
    setScrollTop(getScrollTop() + step);
    if (
      (diff > 0 && getScrollTop() >= to) ||
      (diff < 0 && getScrollTop() <= to)
    ) {
      return;
    }
    scrollTo(to, duration - 16);
  });
}

设置滚动条距顶部的距离

//设置滚动条距顶部的距离
function setScrollTop(value) {
  window.scrollTo(0, value);
  return value;
}

获取 Keycode

var keyCodeMap = {
  8: "Backspace",
  9: "Tab",
  13: "Enter",
  16: "Shift",
  17: "Ctrl",
  18: "Alt",
  19: "Pause",
  20: "Caps Lock",
  27: "Escape",
  32: "Space",
  33: "Page Up",
  34: "Page Down",
  35: "End",
  36: "Home",
  37: "Left",
  38: "Up",
  39: "Right",
  40: "Down",
  42: "Print Screen",
  45: "Insert",
  46: "Delete",
  48: "0",
  49: "1",
  50: "2",
  51: "3",
  52: "4",
  53: "5",
  54: "6",
  55: "7",
  56: "8",
  57: "9",
  65: "A",
  66: "B",
  67: "C",
  68: "D",
  69: "E",
  70: "F",
  71: "G",
  72: "H",
  73: "I",
  74: "J",
  75: "K",
  76: "L",
  77: "M",
  78: "N",
  79: "O",
  80: "P",
  81: "Q",
  82: "R",
  83: "S",
  84: "T",
  85: "U",
  86: "V",
  87: "W",
  88: "X",
  89: "Y",
  90: "Z",
  91: "Windows",
  93: "Right Click",
  96: "Numpad 0",
  97: "Numpad 1",
  98: "Numpad 2",
  99: "Numpad 3",
  100: "Numpad 4",
  101: "Numpad 5",
  102: "Numpad 6",
  103: "Numpad 7",
  104: "Numpad 8",
  105: "Numpad 9",
  106: "Numpad *",
  107: "Numpad +",
  109: "Numpad -",
  110: "Numpad .",
  111: "Numpad /",
  112: "F1",
  113: "F2",
  114: "F3",
  115: "F4",
  116: "F5",
  117: "F6",
  118: "F7",
  119: "F8",
  120: "F9",
  121: "F10",
  122: "F11",
  123: "F12",
  144: "Num Lock",
  145: "Scroll Lock",
  182: "My Computer",
  183: "My Calculator",
  186: ";",
  187: "=",
  188: ",",
  189: "-",
  190: ".",
  191: "/",
  192: "`",
  219: "[",
  220: "\\",
  221: "]",
  222: "'"
};
/**
 * @desc 根据keycode获得键名
 * @param  {Number} keycode
 * @return {String}
 */
function getKeyName(keycode) {
  if (keyCodeMap[keycode]) {
    return keyCodeMap[keycode];
  } else {
    console.log("Unknow Key(Key Code:" + keycode + ")");
    return "";
  }
}

判断对象是否为空

/**
 *
 * @desc   判断`obj`是否为空
 * @param  {Object} obj
 * @return {Boolean}
 */
function isEmptyObject(obj) {
  if (!obj || typeof obj !== "object" || Array.isArray(obj)) return false;
  return !Object.keys(obj).length;
}

判断浏览器是否支持 webP 格式图片

//isSupportWebP(); true
function isSupportWebP() {
  return (
    !![].map &&
    document
      .createElement("canvas")
      .toDataURL("image/webp")
      .indexOf("data:image/webp") == 0
  );
}

距现在的已过时间

/**
 * @desc   格式化${startTime}距现在的已过时间
 * @param  {Date} startTime
 * @return {String}
 */
function formatPassTime(startTime) {
  var currentTime = Date.parse(new Date()),
    time = currentTime - startTime,
    day = parseInt(time / (1000 * 60 * 60 * 24)),
    hour = parseInt(time / (1000 * 60 * 60)),
    min = parseInt(time / (1000 * 60)),
    month = parseInt(day / 30),
    year = parseInt(month / 12);
  if (year) return year + "年前";
  if (month) return month + "个月前";
  if (day) return day + "天前";
  if (hour) return hour + "小时前";
  if (min) return min + "分钟前";
  else return "刚刚";
}

距现在的剩余时间

/**
 *
 * @desc   格式化现在距${endTime}的剩余时间
 * @param  {Date} endTime
 * @return {String}
 */
function formatRemainTime(endTime) {
  var startDate = new Date(); //开始时间
  var endDate = new Date(endTime); //结束时间
  var t = endDate.getTime() - startDate.getTime(); //时间差
  var d = 0,
    h = 0,
    m = 0,
    s = 0;
  if (t >= 0) {
    d = Math.floor(t / 1000 / 3600 / 24);
    h = Math.floor((t / 1000 / 60 / 60) % 24);
    m = Math.floor((t / 1000 / 60) % 60);
    s = Math.floor((t / 1000) % 60);
  }
  return d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
}

SessionStorage&getLocalStorage 方法

//设置sessionStorage
function setSessionStorage(key, value) {
  if (window.sessionStorage) {
    window.sessionStorage.setItem(key, window.JSON.stringify(value));
  }
},
//获取sessionStorage
function getSessionStorage(key) {
  var json = "";
  if (window.sessionStorage) {
    json = window.sessionStorage.getItem(key);
  }
  return window.JSON.parse(json);
},
//设置localStorage
function setLocalStorage(key, value) {
  if (window.localStorage) {
    window.localStorage.setItem(key, window.JSON.stringify(value));
  }
},
//获取localStorage
function getLocalStorage(key) {
  var json = "";
  if (window.localStorage) {
    json = window.localStorage.getItem(key);
  }
  return window.JSON.parse(json);
},

数组对象去重

// 去重
function dedupe(Arr) {
  let hash = {};
  let allArr = Arr.reduce(function(item, next) {
    hash[next.numbers] ? "" : (hash[next.numbers] = true && item.push(next));
    return item;
  }, []);
  return allArr;
}

回到顶部动画

function backTop() {
  const sTop = document.documentElement.scrollTop || document.body.scrollTop;
  const duration = 1000;//动画时间
  scrollTop(window, sTop, 0, duration);
  function scrollTop(el, from = 0, to, duration = 500, endCallback) {
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = (
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          return window.setTimeout(callback, 1000 / 60);
        }
      );
    }
    const difference = Math.abs(from - to);
    const step = Math.ceil(difference / duration * 50);
    function scroll(start, end, step) {
      if (start === end) {
        endCallback && endCallback();
        return;
      }
  
      let d = (start + step > end) ? end : start + step;
      if (start > end) {
        d = (start - step < end) ? end : start - step;
      }
  
      if (el === window) {
        window.scrollTo(d, d);
      } else {
        el.scrollTop = d;
      }
      window.requestAnimationFrame(() => scroll(d, end, step));
    }
    scroll(from, to, step);
  }
}

判断数据类型

function typeOf(obj) {
  const toString = Object.prototype.toString;
  const map = {
      '[object Boolean]'  : 'boolean',
      '[object Number]'   : 'number',
      '[object String]'   : 'string',
      '[object Function]' : 'function',
      '[object Array]'    : 'array',
      '[object Date]'     : 'date',
      '[object RegExp]'   : 'regExp',
      '[object Undefined]': 'undefined',
      '[object Null]'     : 'null',
      '[object Object]'   : 'object'
  };
  return map[toString.call(obj)];
}

js常用函数整理