常用代码记录

3月前 0 2

常用方法
- js获取地址栏参数
常用正则表达式
常用样式

常用方法

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;

常用正则表达式

常用样式

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

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