常用代码记录

目录

• 常用方法
  • object拼接成url参数
  • js获取地址栏参数
  • js实现复制功能
  • 根据数组对象某个属性的值筛选出符合要求的数组元素
  • 手写深度拷贝方法
  • 检测文件类型是否符合要求
  • 从响应头部读取文件名称
  • 文件流下载
  • 文件转成base64
  • 手机号脱敏
  • 身份证号脱敏
• 常用正则表达式
• 常用样式
  • 网页置灰样式
  • 字母、数字太长不换行问题
  • 元素最快居中对齐（垂直、水平居中）
  • textarea去掉右侧滚动条，去掉右下角拖拽
  • 修改css选中字体颜色
  • CSS3绘制三角形
  • 文字两端对齐

常用方法

object拼接成url参数

function generateUrlParam(params){
  return Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
}
let obj = {name=小明,age=20}
generateUrlParam(obj) // name=小明&age=20

js获取地址栏参数

function GetRequest () {
  var url = location.search;
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    var strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
var agreeGetRequest = GetRequest().xxx;

js实现复制功能

/** 复制内容
 * @param {String}  value 需要被复制的内容
 * */
function copy (value    ) {
  var _input = document.createElement("input");   // 直接构建input
  _input.value = value    ;  // 设置内容
  document.body.appendChild(_input);    // 添加临时实例
  _input.select();   // 选择实例内容
  document.execCommand("Copy");   // 执行复制
  this.$message({ // element提示，如果不用换成其他提示
    type: 'success',
    message: '复制成功'
  })
  document.body.removeChild(_input); // 删除临时实例
}

根据数组对象某个属性的值筛选出符合要求的数组元素

/** 根据数组对象某个属性的值筛选出符合要求的数组元素
 * @param {Array}  arr      过滤的数组
 * @param {String} attr     数组对象中的某个属性
 * @param {String} val      具体某个属性的值
 * @result {Object} 返回找到的对象元素
 * */
export function arrayFind(arr, attr, val) {
  if (!(arr instanceof Array)) {
    return [];
  }
  let result = arr.find((value) => value[attr] == val);

  if (result) {
    return result;
  } else {
    return "";
  }
}

手写深度拷贝方法

/** 深度拷贝方法
 * @param {Object} p 需要被拷贝的数据
 * @param {Object} c 需要拷贝到什么地方，如果没有默认新建一个
 * @result {Object} 返回深度拷贝后的数据
 * */
export function extendCopy(p, c) {
  var c = c || {};
  for (var i in p) {
    if (typeof p[i] === "object") {
      c[i] = p[i] instanceof Array ? [] : {};
      extendCopy(p[i], c[i]);
    } else {
      c[i] = p[i];
    }
  }
  return c;
};

检测文件类型是否符合要求

/** 检测文件类型是否符合要求
 * @param {String} name 文件名
 * @param {Array}  acceptFormat 允许的文件类型
 * @result {Boolean} 返回结果 true:符合要求 false:不符合要求
 * */
export function checkFileType(name, acceptFormat) {
  let resultState, ex;
  resultState = false;
  ex = name.substring(name.lastIndexOf(".") + 1);
  ex = ex.toLowerCase();
  for (var i = 0; i < acceptFormat.length; i++) {
    if (ex.indexOf(acceptFormat[i]) != -1) {
      resultState = true;
      break;
    }
  }
  return resultState;
}

从响应头部读取文件名称

/** 从响应头部读取文件名称
 * @param {res}  response
 * */
export function responseFileName(res) {
  if (res && res.headers) {
    let resultFileName = decodeURI(res.headers["content-disposition"]);
    return resultFileName.substring(resultFileName.indexOf("=")).substring(1);
  }
  return "";
}

文件流下载

/**
 * @param {String} resource 文件流
 * @param {String} fileType 文件类型
 * @param {String} fileName 文件名 （可以响应头部读取文件名，如下）
 *  let resultFileName = res.headers['content-disposition'];
 *  let name = resultFileName.substring(resultFileName.indexOf('=')).substring(1);
 *  使用方式 this.$downloadBlob(data,'application/octet-stream','download.zip');其中文件名可以从响应头截取
 * */
export function downloadBlob(resource, fileType, fileName) {
  var data = new Blob([resource], {
    type: fileType
  });
  if ("download" in document.createElement("a")) {
    //非IE
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = fileName;
    anchor.style.display = "none";
    document.body.appendChild(anchor);
    anchor.click();
    window.URL.revokeObjectURL(anchor.href);
    document.body.removeChild(anchor);
  } else {
    //IE10+下载
    navigator.msSaveBlob(data, fileName);
  }
}

文件转成base64

/**
 * 文件转化成 base64
 * @param {Object} file
 * @param {Function} callback
 * */
export function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(evt) {
      resolve(evt.target.result);
    };
  });
}

手机号脱敏

/**
 * 手机号脱敏
 * @param phone 手机号 17623142317
 * @returns 176****2317
 */
export function maskPhone(phone) {
  return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
}

身份证号脱敏

/**
 * 身份证号脱敏
 * @param idCard 身份证号 500231199610147256
 * @returns 500************256
 */
export function maskIdCard(idCard) {
  return idCard.replace(/^(\d{3})\d{12}([\dXx]{3})$/, '$1************$2')
}

---

常用正则表达式

  checkPhone: /^1[0-9]\d{9}$/, // 手机号
  checkVerifyCode: /^\d{6}$/, // 6位验证码
  checkCardNo: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, // 身份证号码
  checkName: /^[\u4e00-\u9fa5]{1,16}$/, // 匹配1-16位中文
  checkNumber: /^\d$/g, // 检测只能输入数字
  email: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, // 邮箱
  socialCreditCode: /^[A-Z0-9]{18}$/, // 社会信用代码(比较宽松)
  bankCard: /^\d{8,19}$/, // 银行卡号

---

常用样式

网页置灰样式

body, html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

字母、数字太长不换行问题

word-break:break-all;

元素最快居中对齐（垂直、水平居中）

<style>
    .content{
      width: 500px;
      height: 500px;
      border: 1px solid red;
      display: flex;
    }

    .item{
      width: 100px;
      height: 100px;
      background: #18b1f8;
      margin: auto;
    }
  </style>

 <div class="content">
    <div class="item"></div>
  </div>

textarea去掉右侧滚动条，去掉右下角拖拽

<textarea style="overflow:hidden; resize:none;"> </textarea>

修改css选中字体颜色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red::selection{
      background: red;
      color: #fff; 
    }
    .blue::selection{
      background: blue;
      color: #fff;
    }
  </style>
</head>

<body>
  <p>这里是一段正常文字</p>
  <p class="red">这里是一段选中后背景颜色为红色的文字</p>
  <p class="blue">这里是一段选中后背景颜色为蓝色的文字</p>
</body>

</html>

CSS3绘制三角形

.top {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: transparent transparent rebeccapurple
    }

    .right {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: transparent rebeccapurple transparent transparent;
    }

    .down {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: rebeccapurple transparent transparent transparent;
    }

    .left {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: transparent transparent transparent rebeccapurple;
    }
   .all {
      width: 0;
      height: 0;
      border-width: 30px;
      border-style: solid;
      border-color: red gold salmon rebeccapurple;
    }

文字两端对齐

.text {
  width:200px;
  text-align: "justify";// 文字向两侧对齐，对最后一行无效。
  text-align: "justify-all"; // 和 justify 一致，但是强制使最后一行两端对齐。(目前还在试验阶段，存在兼容性)
  text-align-last: "justify"; // 最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。
}

所以使用的时候可以考虑text-align: "justify";和text-align-last: "justify";一起使用，当然看具体的实现需求是什么样的。