---
title: "「合集」常用的 JavaScript 代码"
date: 2025-03-16T22:02:06Z
lastmod: 2025-03-16T22:02:33Z
tags: [合集,代码片段,Web 前端,JavaScript]
---

# 「合集」常用的 JavaScript 代码

## document

#### 焦点不在当前窗口时改变标题

```javascript
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    document.title = '焦点不在当前窗口';
  } else {
    document.title = '焦点在当前窗口';
  }
});
```

#### 解除离开页面检测

```javascript
document.hasFocus = function () {
  return true;
};
```

#### 使网页内容（body）可编辑

**开启**

```javascript
document.body.contentEditable = 'true';
document.designMode = 'on';
```

```javascript
(function () {
  let items = document.querySelectorAll('iframe');
  for (let i = 0; i < items.length; i++) {
    try {
      items[i].contentDocument.body.contentEditable = 'true';
      items[i].contentDocument.designMode = 'on';
    } catch (err) {
      console.log(err);
    }
  }
})();
```

**关闭**

```javascript
document.body.contentEditable = 'false';
document.designMode = 'off';
```

```javascript
(function () {
  let items = document.querySelectorAll('iframe');
  for (let i = 0; i < items.length; i++) {
    try {
      items[i].contentDocument.body.contentEditable = 'false';
      items[i].contentDocument.designMode = 'off';
    } catch (err) {
      console.log(err);
    }
  }
})();
```

---

## function

#### Blob 转 DataURL

```javascript
/**
 * @description 转换 Blob 为 DataURL
 * @param   {Blob} blob
 * @returns {Promise<{ dataURL: string; success: boolean; }>}
 */
function blobToDataURL(blob) {
  return new Promise((resolve) => {

    let fileReader = new FileReader();

    // 处理读取异常
    fileReader.onerror = function () {
      resolve({
        dataURL: '',
        success: false,
      });
    };

    // 处理读取完成
    fileReader.onload = function () {
      resolve({
        dataURL: fileReader.result,
        success: true,
      });
    };

    // 开始读取
    fileReader.readAsDataURL(blob);

  });

}
```

#### 查找元素的 Vue 对象

```javascript
/**
 * @typedef  {object} FunctionResult
 * @property {boolean}     state   是否查找成功
 * @property {HTMLElement} element Vue 对象所在的元素
 * @property {object}      data    找到的 Vue 对象
 * @property {object[]}    parents 父 Vue 对象
 */

/**
 * @description 查找元素的 Vue 对象
 * @param   {HTMLElement} el 需要查找的元素
 * @returns {FunctionResult} 返回查找结果信息
 */
function findElementVue(el) {

  /** @type {FunctionResult} */
  const result = {
    state: false,
    element: null,
    data: null,
    parents: [],
  };

  const attrName = '__vue__';

  // 查找属性
  while (el) {
    const data = el[attrName];
    if (data) {
      result.state = true;
      result.element = el;
      result.data = data;
      break;
    } else {
      el = el.parentElement;
    }
  }

  // 查找父对象
  if (result.state) {
    let attrName = '$parent';
    let parent = result.data[attrName];

    while (parent) {
      result.parents.push(parent);
      parent = parent[attrName];
    }
  }

  return result;

}
```

#### 查找字符 `char`​ 在 `str`​ 中第 `num` 次出现的位置

```javascript
function findChar(str = '', char = '', num = 1) {
  var index = str.indexOf(char);
  num = num - 1;
  if (num > 0) {
    for (var i = 0; i < num; i++) {
      index = str.indexOf(char, index + 1);
    }
  }
  return index;
}
```

#### 处理过渡效果

```javascript
// https://www.npmjs.com/package/d3-ease

/**
 * @description 处理过渡效果
 * @param {object}   opts
 * @param {number}   opts.duration 时长（毫秒）
 * @param {Function} opts.easeFn   过渡计算函数
 * @param {Function} opts.onStop   结束时回调
 * @param {Function} opts.onTick   进行时回调
 * @returns {Promise<boolean>}
 */
function easeHandler(opts = {}) {

  const {
    duration = 0,
    easeFn = easeLinear,
    onStop = null,
    onTick = null,
  } = opts;

  const isValid = (
    (typeof duration === 'number' && duration >= 0) &&
    (typeof easeFn === 'function') &&
    (onStop ? typeof onStop === 'function' : true) &&
    (onTick ? typeof onTick === 'function' : true)
  );

  if (!isValid) {
    console.error('处理失败：参数错误');
    return Promise.resolve(false);
  }

  // 时长为 0，直接结束
  if (duration === 0) {
    onTick && onTick(1);
    onStop && onStop();
    return Promise.resolve(true);
  }

  const sTime = Date.now();
  const eTIme = sTime + duration;

  return new Promise((resolve) => {

    const fn = function () {
      try {

        const curr = Date.now();
        const diff = Math.min(duration, curr - sTime);
        const p = parseFloat((diff / duration).toFixed(3));
        const n = parseFloat(easeFn(p).toFixed(3));

        if (curr < eTIme) {
          // [继续]
          onTick && onTick(n);
          requestAnimationFrame(fn);
        } else {
          // [结束]
          onTick && onTick(1);
          onStop && onStop();
          resolve(true);
        }

      } catch (error) {
        console.error('处理失败：');
        console.error(error);
        resolve(false);
      }
    };

    // 开始
    fn();

  });

}
```

#### 对有符号整型、无符号整型、浮点型、十六进制、二进制的数据处理

参考：https://www.cnblogs.com/zhouheblog/p/13578012.html

```javascript
// 十六进制字符串转有符号整型（支持 S8、S16、S32）
function hexToInt(hex) {
  if (!hex) {
    return NaN;
  }
  if (hex.length % 2 !== 0) {
    hex = '0' + hex;
  }
  let num = parseInt(hex, 16);
  let max = Math.pow(2, hex.length / 2 * 8);
  if (num > max / 2 - 1) {
    num = num - max;
  }
  return num;
}
```

```javascript
// 十六进制字符串转无符号整型（支持 U8、U16、U32）
parseInt(str, 16);
```

```javascript
/**
 * @description 合并对象（lodash.mergeWith）
 * - 将会修改目标对象
 * - 若来源属性为数组，将会直接替换
 * - 若目标属性为对象，但来源属性为 `null`，则跳过
 * @template TObject
 * @param   {TObject} obj 合并目标
 * @param   {TObject} src 合并来源
 * @returns {TObject}
 */
function mergeObject(obj, src) {
  return mergeWith(obj, src, function (objValue, srcValue) {
    if (Array.isArray(srcValue)) {
      return srcValue;
    } else if (srcValue === null && isObject(objValue)) {
      return objValue;
    }
  });
}
```

#### 格式化时间

```javascript
/**
  * @description 格式化时间
  * @param   {(number|string|Date)} [time] 要格式化的时间（默认当前）
  * @param   {string} [format] 需要的格式（默认 yyyy-mm-dd hh:ii:ss）
  * @returns {string} 格式化后的时间
  */
function formatTime(time = new Date(), format = 'yyyy-mm-dd hh:ii:ss') {

  let timeType = typeof time;

  /** @type {Date} */
  let dateObj = null;

  if (timeType == 'number' || timeType == 'string') {
    dateObj = new Date(time);
  } else if (timeType == 'object') {
    dateObj = time;
  }

  // 时间信息
  let timeInfo = {
    // 年月日
    y: dateObj.getFullYear(),
    m: dateObj.getMonth() + 1,
    d: dateObj.getDate(),
    // 时分秒
    h: dateObj.getHours(),
    i: dateObj.getMinutes(),
    s: dateObj.getSeconds(),
  };

  // 格式占位符正则
  let formatReg = {
    y: /y+/g,
    m: /m+/g,
    d: /d+/g,
    h: /h+/g,
    i: /i+/g,
    s: /s+/g,
  };

  for (let key in formatReg) {

    // 正则匹配
    let matched = format.match(formatReg[key]);

    // 获取对应的时间
    let timeValue = String(timeInfo[key]);

    // 无匹配结果
    if (!matched) {
      continue;
    }

    // 根据匹配结果（位数）进行替换
    matched.forEach(function (v) {
      let tLength = timeValue.length;
      let vLength = v.length;
      // 长度不足，补零
      if (tLength < vLength) {
        timeValue = timeValue.padStart(v.length, '0');
      }
      // 长度超出，截取
      // if (tLength > vLength) {
      //   timeValue = timeValue.substring(tLength - vLength);
      // }
      // 替换对应的值
      format = format.replace(v, timeValue);
    });

  }

  return format;

}
```

#### 获取随机的十六进制色

```javascript
/** 获取随机的十六进制色 */
function getHEXColor() {
  var codes = [
    '0', '1', '2', '3', '4', '5', '6', '7',
    '8', '9', 'A', 'B', 'C', 'D', 'E', 'F',
  ];
  var colors = ['#'];
  for (let i = 0; i < 6; i++) {
    let index = Math.floor(Math.random() * 16);
    colors.push(codes[index]);
  }
  return colors.join('');
}
```

#### 获取元素的边界信息

```javascript
/**
 * @description 获取元素的边界信息（当前元素必须在父元素内）
 * @param {Element} curr   当前 DOM 元素
 * @param {Element} parent 父 DOM 元素
 */
function getBoundaryInfo(curr, parent) {

  if (!curr || !parent) {
    console.error('获取失败，缺少参数！');
    return null;
  }

  var result = {};
  var currRect = curr.getBoundingClientRect();
  var parentRect = parent.getBoundingClientRect();

  // 当前元素四角坐标和宽高
  result.curr = {
    x0: currRect.left,
    x1: currRect.right,
    y0: currRect.top,
    y1: currRect.bottom,
    w: currRect.width,
    h: currRect.height,
  };

  // 父元素四角坐标
  result.parent = {
    x0: parentRect.left,
    x1: parentRect.right,
    y0: parentRect.top,
    y1: parentRect.bottom,
    w: parentRect.width,
    h: parentRect.height,
  };

  // 距离
  result.distance = {
    top: result.curr.y0 - result.parent.y0,
    bottom: result.parent.y1 - result.curr.y1,
    left: result.curr.x0 - result.parent.x0,
    right: result.parent.x1 - result.curr.x1,
  };

  return result;

}
```

#### 获取元素的坐标信息

```javascript
/**
 * @description 获取元素的坐标信息（四个角以及宽高）
 * @param {Element} element DOM 元素
 */
function getElemPosInfo(element) {
  if (!element) {
    console.error('获取失败，缺少参数！');
    return null;
  }
  let rect = element.getBoundingClientRect();
  let data = {
    x0: rect.left,
    x1: rect.right,
    y0: rect.top,
    y1: rect.bottom,
    w: rect.width,
    h: rect.height,
  };
  return data;
}
```

#### 获取月份第一天和最后一天的时间戳

```javascript
/**
 * @description 获取月份第一天和最后一天的时间戳
 * @param {number} year 年份
 * @param {number} month 月份
 * @returns `{ start: 第一天, end: 最后一天 }`
 */
function getTimestampOfMonth(year, month) {
  var start = new Date(year, month - 1, 1)
  var end = new Date(year, month, 0);
  var time = {
    start: start.getTime(),
    end: end.getTime()
  };
  return time;
}
```

#### 获取坐标下方的元素

```javascript
/**
 * @description 获取坐标下方的元素（从子元素到父元素）
 * @param {number} x 横坐标
 * @param {number} y 纵坐标
 */
function elemsFromPoint(x, y) {

  if (x === undefined || y === undefined) {
    return [];
  }

  x = Math.floor(x);
  y = Math.floor(y);

  let item = document.elementFromPoint(x, y);
  let items = [];

  if (item) {
    items.push(item);
  } else {
    return [];
  }

  while (item.parentElement) {
    item = item.parentElement;
    items.push(item);
  }

  return items;

};
```

#### 计算字符串的字符数

```javascript
/**
 * @description 计算字符串的字符数（数字英文字母 +1，其他 +3）
 * @param   {string} str 被检测的字符串
 * @returns {number} 字符数
 */
function calcChars(str) {
  var reg = /[0-9a-zA-Z]/;
  var sum = 0;
  for (let i in str) {
    if (reg.test(str.charAt(i))) {
      sum += 1;
    } else {
      sum += 3;
    }
  }
  return sum;
}
```

#### 加减法精度

```javascript
/**
 * @description 加减法精度
 * @param   {string} type 类型（plus、sub）
 * @param   {number} [num1] 数值1，默认为 0
 * @param   {number} [num2] 数值2，默认为 0
 * @returns {(number|null)} 返回两个数值相加或相减后的结果
 */
function accPlusAndSub(type, num1 = 0, num2 = 0) {

  var decimalsNum1 = (String(num1).split('.')[1] || '').length;
  var decimalsNum2 = (String(num2).split('.')[1] || '').length;
  var decimalsMax = Math.max(decimalsNum1, decimalsNum2);
  var multiplies = Math.pow(10, decimalsMax);

  if (type === 'plus') {
    return ((num1 * multiplies + num2 * multiplies) / multiplies);
  } else if (type === 'sub') {
    return ((num1 * multiplies - num2 * multiplies) / multiplies);
  } else {
    return null;
  }

}
```

#### 检测用户是否离开页面

```javascript
/**
 * @description 检测用户是否离开页面（一秒检测一次）
 * @param {object}   [options] 配置选项
 * @param {function} [options.onblur]    用户离开页面时的回调函数
 * @param {function} [options.onfocus]   用户返回页面时的回调函数
 * @param {string}   [options.blurDelay] 设定用户离开页面多久后才调用 onblur
 * - 单位为秒
 * - 默认 0
 * @param {string}   [options.timerName] 定时器名称
 * - 用于 setInterval()
 * - 默认 tCheckPageBlur
 */
function checkPageBlur(options) {

  var config = {
    onblur: null,
    onfocus: null,
    blurDelay: 0,
    timerName: 'tCheckPageBlur',
  };

  Object.assign(config, options);

  var timerName = config.timerName; // 定时器名称
  var checkDelay = 0;               // 延时
  var blurTriggered = false;        // 标记状态

  clearInterval(window[timerName]);
  window[timerName] = setInterval(function () {
    var isFocus = document.hasFocus();

    if (isFocus && blurTriggered) {
      // 在页面且触发过 blur
      blurTriggered = false;
      checkDelay = 0;
      try {
        config.onfocus && (config.onfocus());
      } catch (err) {
        console.error('[检测] 回调函数 onfocus 出错\n', err);
      }
    } else if (!isFocus && !blurTriggered) {
      // 不在页面且未触发 blur
      if (checkDelay >= config.blurDelay) {
        blurTriggered = true;
        checkDelay = 0;
        try {
          config.onblur && (config.onblur());
        } catch (err) {
          console.error('[检测] 回调函数 onblur 出错\n', err);
        }
      } else {
        checkDelay += 1;
      }
    }
  }, 1000);

}

// 调用
checkPageBlur({
  onblur: function () {
    console.log('[检测] 用户离开页面');
  },
  onfocus: function () {
    console.log('[检测] 用户返回页面');
  },
});
```

#### 解析 URL 地址的参数（?=...）为一个对象

```javascript
function queriesToObj(url = '') {
  var split = url.split('?')[1];
  var arr = split.split('&');
  var obj = {};

  arr.forEach(function (item) {
    var kv = item.split('=');
    obj[kv[0]] = kv[1];
  });

  return obj;
}
```

#### 矩形碰撞检测

```javascript
/**
 * @description 矩形碰撞检测
 * @param   {Element} elemA        当前元素
 * @param   {Element} elemB        目标元素
 * @param   {boolean} [checkAside] 是否包含边缘碰撞，默认包含
 * @returns {object} `{ error: 是否检测失败, hit: 是否碰撞 }`
 */
function rectColisionCheck(elemA, elemB, checkAside = true) {
  const result = {
    error: false,
    hit: false,
  };

  if (!(elemA && elemB)) {
    console.error('缺少参数');
    result.error = true;
    return result;
  }

  const rectA = elemA.getBoundingClientRect();
  const rectB = elemB.getBoundingClientRect();

  if (checkAside) {
    result.hit = !(
      rectA.bottom < rectB.top ||
      rectA.left > rectB.right ||
      rectA.top > rectB.bottom ||
      rectA.right < rectB.left
    );
  } else {
    result.hit = !(
      rectA.bottom <= rectB.top ||
      rectA.left >= rectB.right ||
      rectA.top >= rectB.bottom ||
      rectA.right <= rectB.left
    );
  }

  return result;
}
```

#### 设置事件对象属性

```javascript
/**
 * @description 设置事件对象属性
 * @param {Eveny}  ev 事件对象
 * @param {object} props 要设置的属性
 */
function setEvProps(ev, props = {}) {
  if (ev) {
    for (let key in props) {
      Object.defineProperty(ev, key, {
        configurable: true,
        enumerable: true,
        get: function () {
          return props[key];
        },
      });
    }
  }
}
```

#### 通过点路径访问对象属性

```javascript
/**
 * @description 通过点路径访问对象属性
 * @param {object} obj
 * @param {string} path
 */
function getObjValue(obj, path = '') {

  if (typeof obj !== 'object') {
    console.error('访问失败，参数 obj 错误！');
    return;
  }

  if (typeof path !== 'string') {
    console.error('访问失败，参数 path 错误！');
    return;
  }

  if (path === '') {
    return obj;
  }

  return path.split('.').reduce((a, b) => {
    return (a === undefined ? a : a[b]);
  }, obj);

}
```

#### 暂停执行代码一段时间

```javascript
/**
 * @description 暂停执行代码一段时间
 * @param   {number} [time] 时长（毫秒），默认 1000
 * @returns {Promise} Promise
 */
function sleep(time = 1000) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

await sleep(1000);
```

#### 字符串转文件

```javascript
/**
 * @description 字符串转文件
 * @param {string} data 字符串数据
 * @param {string} filename 文件名
 * @param {string} filetype 文件类型（MIME）
 */
function strToFile(data = '', filename = 'export.txt', filetype = 'text/plain') {

  // 转为 Blob
  var strToBlob = new Blob([data], { type: filetype });
  // URL 对象兼容性处理
  var urlObject = window.URL || window.webkitURL || window;
  // 创建对象 URL
  var blobURL = urlObject.createObjectURL(strToBlob);
  // 创建 a 元素
  var aElem = document.createElement('a');

  // 设置属性
  aElem.classList.add('hidden');
  aElem.download = filename;
  aElem.href = blobURL;
  aElem.target = '_blank';

  // 添加元素
  document.body.appendChild(aElem);

  // 模拟点击
  aElem.click();

  // 移除元素
  aElem.remove();

  // 释放对象
  urlObject.revokeObjectURL(blobURL);

}
```

‍

#### 转换 JSON 为 SQLite 插入语句

```javascript
/**
 * @description 生成 SQLite 插入语句
 * @param {string}            t 表名
 * @param {string[]}          k 键名列表
 * @param {(number|string)[]} v 值列表
 */
function getSqlInsert(t, k, v) {
  k = k.map(val => `"${val}"`);
  v = v.map(val => (val === null ? 'NULL' : `'${val}'`));
  return `INSERT INTO "${t}" (${k.join(', ')}) VALUES (${v.join(', ')})`;
}

/**
 * @description 转换 JSON 为 SQLite 语句（INSERT）
 * @param {string} table 表名
 * @param {Record<string, number|string>[]} data
 * @param {string[]} [keys] 属性过滤
 */
function jsonToSql(table, data, keys) {
  try {

    const result = [];
    const filter = Array.isArray(keys);

    if (!table) {
      throw new Error('缺少 table 参数');
    }

    if (!Array.isArray(data)) {
      throw new Error('缺少 data 参数');
    }

    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      let keys = [];
      let values = [];
      let sql = '';
      // 记录 key 和 value
      if (filter) {
        for (let key in item) {
          if (keys.includes(key)) {
            keys.push(key);
            values.push(item[key]);
          }
        }
      } else {
        for (let key in item) {
          keys.push(key);
          values.push(item[key]);
        }
      }
      // 生成 SQL 插入语句
      sql = getSqlInsert(table, keys, values);
      result.push(sql);
    }

    return result;

  } catch (error) {
    console.error('转换失败：');
    console.error(error);
    return null;
  }
}
```