标签：常用记录 color 代码 height width input border transparent

常用方法

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实现复制功能

function copy (docId) {
  var _input = document.createElement("input");   // 直接构建input
  _input.value = docId;  // 设置内容
  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 "";
  }
}

常用正则表达式

  checkPhone: /^1[0-9]\d{9}$/, // 手机号
  checkVerifyCode: /^\d{6}$/, // 手机号验证码
  checkCardNo: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, // 身份证号码
  checkName: /^[\u4e00-\u9fa5]{1,16}$/ // 匹配1-16位中文

常用样式

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

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绘制三角形

绘制的原理如下：一个border是由上下左右四个小三角形组成的，它的宽度就是下边这个正方形的边长

弄清楚原理，一切就简单了。

.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;
    }

标签：常用,记录,color,代码,height,width,input,border,transparent
From： https://www.cnblogs.com/mynl/p/16852522.html

常用代码记录