web前端工具集，适合放入自己函数库中(持续更新...)

js原生功能 复制粘贴 (支持pc端及移动端)

//方法一
/*
* 功能：js复制粘贴
* @text 需要复制的内容
* @sucTip 复制成功后提示问题
* @isTip 是否有提示 默认有提示
*/
export function copyText({text,sucTip,isTip=true} = {}) {
  let element  = document.createElement('input');
  element.value = text;
  element.style.position = 'fixed';
  element.style.left = '-100%';
  element.style.top = '-100%';
  document.body.appendChild(element);
  element.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  document.body.removeChild(element);
  if(isTip){
    window.alert(sucTip?sucTip:'复制成功')
  }
}
//方法二
/*
将文本复制到剪贴板非常有用，也是一个很难解决的问题。您可以在Internet上找到各种解决方案，但是下面的解决方案可能是最小，最聪明的解决方案之一。
*/
export function copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text)
}

 js取得一个区间的随机整数

/*
* 功能：取得一个区间的随机整数
* @n 最小值
* @m 最大值
*/
export function rnd(n, m){
  var random = Math.floor(Math.random()*(m-n+1)+n);
  return random;
}

js在移动端时用了点击事件，但是在滑动页面时，总是会被触发

/*
* 功能：在移动端时用了点击事件，但是在滑动页面时，总是会被触发
* @ele 生效容器
*/
export function addEvent({ele} = {}) {
  let locked = false;
  let dom = document.querySelector(ele);
  if(!dom) return false
  dom.addEventListener('touchmove', function(ev){
    locked || (locked = true, dom.addEventListener('touchend', stopTouchendPropagation, true));
  }, true);
  function stopTouchendPropagation(ev){
    ev.stopPropagation();
    dom.removeEventListener('touchend', stopTouchendPropagation, true);
    locked = false;
  }
}

#这里加上容器限制是因为，如果作用全局的话会影响其他插件的工具，比如下拉刷新等插件

js记录工作中常用到的的正则表达

/**
 * 功    能：正则表达
 */
export const regularExpression = {
  r1: /^([+-]?d+.d{0,4})$|^(d+)$/i,//只允许输入整数或者最多4位小数
  http:/((http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?)|((www).[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?)/,//支持http,https,www开头的地址 }

js腾讯QQ表情

/*
*  功能：表情配置
*/

export const emotionParams = {
  list: ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'],
  url: 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/',//腾讯gif图地址
}
#使用 https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif //数组索引即表情顺序 微笑 撇嘴 ...

js获取地址栏参数

/**
 * 功能：获取地址栏参数
 * @name 参数名称 
 * */
export 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;
}

 js函数防抖

/**
 * 功能： 防抖
 * @fn:函数名
 * @wait:函数执行频率
 *
 * */
export function debounce(fn, wait) {
  var timeout = null;
  return function () {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  }
}

js 动态加载js并且执行

/**
 * 功能：动态加载js并且执行
 * @url :需要插入的js
 * */

export const loadJs = function (url) {
  return new Promise((resolve, reject) => {
    //防止定制为空代码报错
    if (!url) {
      reject();
      return
    }
    //防止重复插入
    let scripts = document.querySelectorAll('script');
    for (let i = 0; i < scripts.length; i++) {
      if (scripts[i].src === url) {
        resolve();
        return
      }
    }
    //运行JS
    $.getScript(url).done(() => {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
      document.body.appendChild(script)
      resolve();
    }).fail(() => {
      reject();
    });
  })
}

js 动态加载css并且执行

/**
 * 功能：动态加载css并且执行
 * @url: 需要动态插入的css
 * */

export const loadCss = function (url) {
  return new Promise((resolve, reject) => {
    //防止定制为空代码报错
    if (!url) {
      reject();
      return
    }
    //防止重复插入
    let links = document.querySelectorAll('link');
    for (let i = 0; i < links.length; i++) {
      if (links[i].href === url) {
        resolve();
        return
      }
    }
    //插入节点
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
    resolve();
  })
}

js H5与APP(安卓及IOS)交互方法

/**
 * 功能：H5与APP(安卓及IOS)交互方法
 * @fn: 方法名
 * @params: 参数 适用于 ios是对象类型 安卓是正常参数类型 或者自己修改
 * */

export const dispatchAppFn = function ({fn, params} = {}) {
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid) {
    let androidParams = ''
    for (let key in params) {
      androidParams += `"${params[key]}",`;
    }
    if (androidParams.length) {
      let params = androidParams.substring(0, androidParams.length - 1);
      eval(`window[fn].postMessage(${params})`)
    } else {
      window[fn].postMessage();
    }
  } else if (isiOS) {
    window.webkit.messageHandlers[fn].postMessage(params);
  }
}

js 时间格式化任意格式

/**
 * 功能：时间格式化任意格式
 * @date: 时间 默认是当日
 * @fmt: 输出时间格式 默认是 yyyy-MM-dd
 * 注：月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符
 */
export const formatDate = function ({date = new Date(), fmt = 'yyyy-MM-dd'} = {}) {
  let _date = new Date(date)
  var o = {
    "M+": _date.getMonth() + 1, //月份
    "d+": _date.getDate(), //日
    "h+": _date.getHours(), //小时
    "m+": _date.getMinutes(), //分
    "s+": _date.getSeconds(), //秒
    "q+": Math.floor((_date.getMonth() + 3) / 3), //季度
    "S": _date.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (_date.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

js 计算字符的长度

/**
 * 功能：计算字符的长度
 * @fData：需要计算的数据
 * 出口参数：返回fData的长度(Unicode长度为2，非Unicode长度为1)
 **/
export function byteLen(data) {
  let len = 0
  for (let i = 0; i < data.length; i++) {
    if ((data.charCodeAt(i) < 0) || (data.charCodeAt(i) > 255)) {
      len = len + 2
    } else {
      len = len + 1
    }
  }
  return len
}

js 文字截取

/**
 * 功能：文字截取
 * @str: 文字内容
 * @len: 需要截取的文字长度
 * 注：(Unicode长度为2，非Unicode长度为1)
 * */
export function beautySub(str, len) {
  let n = 0;
  let newStr = '';
  for (let i = 0; i < str.length; i++) {
    if ((str.charCodeAt(i) < 0) || (str.charCodeAt(i) > 255)) {
      n += 2;
    } else {
      n += 1;
    }
    if (n > len) {
      return newStr
    } else {
      newStr += str[i]
    }
  }
}　

移动端加入console调试信息

if((location.href || '').indexOf('vconsole=true') > -1) {
    document.write('<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>');
    document.write('<script>new VConsole()</script>');
}

借助 Math.pow() 你可以将数字截断为某个小数点的方法。

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
-----------------------------------------------------------------
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

删除HTML标签

//这种单行代码使用正则表达式删除了任何看起来像 <xxx> 的字符串，其中 x 可以是任何字符，包括
"<b>A</b>".replace(/<[^>]+>/gi, ""); //A

随机ID生成

//当你在进行原型设计并需要唯一的id时，这可以成为你的首选功能。
const a = Math.random().toString(36).substring(2);
console.log(a) //72pklaoe38u