自己常用方法整理

kkuuid

已于 2024-06-07 16:53:44 修改

阅读量262

点赞数

分类专栏： HTML 文章标签： jquery javascript 前端

于 2022-05-13 10:02:27 首次发布

本文链接：https://blog.csdn.net/kangqiang1998/article/details/124746085

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

上传文件一段时间只上传一次


    // 导入模板
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
          this.$message.error('文件大小不能大于10M')
          return false
      }
      let allowTypes = ['.xlsx']
      let name = file.name
      let lastName = name.slice(name.lastIndexOf('.'))
      if(!allowTypes.includes(lastName)) {
          this.$message.error('文件类型不匹配')
          return false
      }
      this.fileList = [file]
      this.uploadTemplate()
      return false
    },
    uploadTemplate() {
      let file = null;
      if (this.timerId) {
        clearTimeout(this.timerId);
      }
      // 设置一个新的定时器，如果在这个时间内没有新的请求，则发送请求
      this.timerId = setTimeout(() => {
          file = this.fileList[0]
          console.log('发送请求', file);
          // 清除定时器
          clearTimeout(this.timerId);
          this.timerId = null;
      }, 500);
      Base.submit(null, {
        url: "xxxxx",
        data: {
          file: file
        },
        isFormData: true,
        autoQs: true,
      }).then((res) => {
        console.log(res,'LLLLLLLLLLLLLLL');
      }).catch((error) => {
      })
    },

css运动轨迹，利用svg的path实现

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body.body {
      padding: 30px;
    }

    .svg-path-wrap {
      width: 1018px;
      height: 747px;
      position: relative;
      background-color: #153455;
    }

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 999;
    }

    .dot {
      position: absolute;
      left: 0;
      top: 0;
      width: 24px;
      height: 24px;
      animation: svg-path-animation 6s linear 0s infinite normal;
      offset-distance: 0%;
      z-index: 0;
    }

    .dot:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 3px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid red;
      transform: rotate(90deg);
    }

    /* .dot:before {
      content: "";
      display: block;
      width: 8px;
      height: 22px;
      position: absolute;
      background-image: url("./line.png");
      background-size: 100% 100%;
      top: 1px;
      left: 8px;
      transform: rotate(-90deg)
    } */

    .dot1 {
      offset-path: path("M 60 46 L 60 442 L 435 442 L 592 442");
    }

    .dot2 {
      offset-path: path("M 62 690 L 62 516 L 260 516 L 435 516 L 435 442 L 592 442");
    }

    .dot3 {
      offset-path: path("M 262 690 L 260 516 L 435 516 L 435 442 L 592 442");
    }

    .dot4 {
      offset-path: path("M 236 46 L 236 244 L 415 244 L 592 244 L 592 442");
    }

    .dot5 {
      offset-path: path("M 414 46 L 414 244 L 592 244 L 592 442");
    }

    .dot6 {
      offset-path: path("M 592 46 L 592 244 L 592 442");
    }

    .dot7 {
      offset-path: path("M 948 46 L 948 244 L 768 244 L 592 244 L 592 442");
    }

    .dot8 {
      offset-path: path("M 768 46 L 768 244 L 592 244 L 592 442");
    }

    .dot9 {
      offset-path: path("M 434 317 L 592 317 L 592 442");
    }

    .dot10_1 {
      offset-path: path("M 592 442 L 869 442 L 869 442 L 869 364 L 938 364");
    }

    .dot10_2 {
      offset-path: path("M 592 442 L 869 442 L 869 442 L 938 442");
    }

    .dot10_3 {
      offset-path: path("M 592 442 L 869 442 L 869 442 L 869 524 L 938 524");
    }

    .dot11_1 {
      offset-path: path("M 592 442 L 592 629 L 592 629 L 485 629 L 485 678");
    }

    .dot11_2 {
      offset-path: path("M 592 442 L 592 629 L 592 629 L 592 678");
    }

    .dot11_3 {
      offset-path: path("M 592 442 L 592 629 L 592 629 L 697 629 L 697 678");
    }

    .dot11_4 {
      offset-path: path("M 592 442 L 592 629 L 592 629 L 851 629 L 851 678");
    }

    .dot11_5 {
      offset-path: path("M 592 442 L 592 629 L 592 629 L 946 629 L 946 678");
    }

    @keyframes svg-path-animation {
      from {
        offset-distance: 0%;
      }

      to {
        offset-distance: 100%;
      }
    }
  </style>
</head>

<body class="body">
  <div class="svg-path-wrap">
    <div class="dot dot1 el-icon-caret-right"></div>
    <div class="dot dot2 el-icon-caret-right"></div>
    <div class="dot dot3 el-icon-caret-right"></div>


    <div class="dot dot4 el-icon-caret-right"></div>
    <div class="dot dot5 el-icon-caret-right"></div>
    <div class="dot dot6 el-icon-caret-right"></div>
    <div class="dot dot7 el-icon-caret-right"></div>
    <div class="dot dot8 el-icon-caret-right"></div>
    <div class="dot dot9 el-icon-caret-right"></div>

    <div class="dot dot10_1 el-icon-caret-right"></div>
    <div class="dot dot10_2 el-icon-caret-right"></div>
    <div class="dot dot10_3 el-icon-caret-right"></div>

    <div class="dot dot11_1 el-icon-caret-right"></div>
    <div class="dot dot11_2 el-icon-caret-right"></div>
    <div class="dot dot11_3 el-icon-caret-right"></div>
    <div class="dot dot11_4 el-icon-caret-right"></div>
    <div class="dot dot11_5 el-icon-caret-right"></div>

    <img class="bg-img" src="./bg.png" alt="" srcset="">
  </div>
</body>

</html>

或者（多条线汇集到一处再出发）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./index.css"> -->
  <!-- <link rel="stylesheet" href="./test.css"> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body.body {
      padding: 30px;
    }

    .svg-path-wrap {
      width: 1018px;
      height: 747px;
      position: relative;
      background-color: #153455;
    }

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 999;
    }

    .dot {
      position: absolute;
      left: 0;
      top: 0;
      width: 24px;
      height: 24px;
      /* background: red; */
      animation: svg-path-animation 6s linear 0s infinite normal;
      offset-distance: 0%;
      z-index: 0;
    }

    /* .dot:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 3px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #f5da55;
      transform: rotate(90deg);
    } */
    .dot:before {
      content: "";
      display: block;
      width: 8px;
      height: 22px;
      position: absolute;
      background-image: url("./line.png");
      background-size: 100% 100%;
      top: 1px;
      left: 8px;
      transform: rotate(-90deg)
    }

    .dot1 {
      offset-path: path("M 60 46 L 60 442 L 434 442");
      animation-delay: 6s;
    }

    .dot2 {
      offset-path: path("M 62 690 L 62 516 L 260 516");
    }

    .dot3 {
      offset-path: path("M 262 690 L 262 516");
    }

    .dot2_3 {
      offset-path: path("M 260 516 L 435 516 L 435 442");
      animation-delay: 6s;
      opacity: 0;
    }

    .dot1_2_3 {
      offset-path: path("M 435 442 L 592 442");
      animation-delay: 12s;

      opacity: 0;
    }

    .dot4 {
      offset-path: path("M 236 46 L 236 244 L 415 244");
    }

    .dot5 {
      offset-path: path("M 414 46 L 414 244");
    }


    .dot4_5 {
      offset-path: path("M 415 244 L 592 244");
      animation-delay: 6s;
      opacity: 0;
    }

    .dot6 {
      offset-path: path("M 592 46 L 592 244");
      animation-delay: 6s;
    }

    .dot7 {
      offset-path: path("M 948 46 L 948 244 L 768 244");
    }

    .dot8 {
      offset-path: path("M 768 46 L 768 244");
    }

    .dot7_8 {
      offset-path: path("M 768 244 L 592 244");
      animation-delay: 6s;
      opacity: 0;
    }

    .dot4_5_6_7_8 {
      offset-path: path("M 592 244 L 592 442");
      animation-delay: 12s;
      opacity: 0;
    }

    .dot9 {
      offset-path: path("M 434 317 L 592 317 L 592 442");
      animation-delay: 12s;
      opacity: 0;
    }

    .dot10 {
      offset-path: path("M 592 442 L 869 442");
      opacity: 0;
    }
    .dot10_1 {
      offset-path: path("M 869 442 L 869 364 L 938 364");
      opacity: 0;
      animation-delay: 6s;
    }
    .dot10_2 {
      offset-path: path("M 869 442 L 938 442");
      opacity: 0;
      animation-delay: 6s;
    }
    .dot10_3 {
      offset-path: path("M 869 442 L 869 524 L 938 524");
      opacity: 0;
      animation-delay: 6s;
    }

    .dot11 {
      offset-path: path("M 592 442 L 592 629");
      opacity: 0;
    }
    .dot11_1 {
      offset-path: path("M 592 629 L 485 629 L 485 678");
      opacity: 0;
      animation-delay: 6s;
    }
    .dot11_2 {
      offset-path: path("M 592 629 L 592 678");
      opacity: 0;
      animation-delay: 6s;
    }
    .dot11_3 {
      offset-path: path("M 592 629 L 697 629 L 697 678");
      opacity: 0;
      animation-delay: 6s;
    }
    .dot11_4 {
      offset-path: path("M 592 629 L 851 629 L 851 678");
      opacity: 0;
      animation-delay: 6s;
    }
    .dot11_5 {
      offset-path: path("M 592 629 L 946 629 L 946 678");
      opacity: 0;
      animation-delay: 6s;
    }
    /* 定义动画 */
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      99% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }


    @keyframes svg-path-animation {
      from {
        offset-distance: 0%;
        opacity: 1;
      }

      to {
        offset-distance: 100%;
        opacity: 1;
      }
    }


    /* .el-icon-caret-right:before {
      content: "\e60e";
    } */
  </style>
</head>

<body class="body">
  <div class="svg-path-wrap">
    <div class="dot dot1 el-icon-caret-right"></div>
    <div class="dot dot2 el-icon-caret-right"></div>
    <div class="dot dot3 el-icon-caret-right"></div>
    <div class="dot dot2_3 el-icon-caret-right"></div>
    <div class="dot dot1_2_3 el-icon-caret-right"></div>


    <div class="dot dot4 el-icon-caret-right"></div>
    <div class="dot dot5 el-icon-caret-right"></div>
    <div class="dot dot4_5 el-icon-caret-right"></div>

    <div class="dot dot6 el-icon-caret-right"></div>

    <div class="dot dot7 el-icon-caret-right"></div>
    <div class="dot dot8 el-icon-caret-right"></div>
    <div class="dot dot7_8 el-icon-caret-right"></div>


    <div class="dot dot4_5_6_7_8 el-icon-caret-right"></div>



    <div class="dot dot9 el-icon-caret-right"></div>


    <div class="dot dot10 el-icon-caret-right"></div>
    <div class="dot dot10_1 el-icon-caret-right"></div>
    <div class="dot dot10_2 el-icon-caret-right"></div>
    <div class="dot dot10_3 el-icon-caret-right"></div>

    <div class="dot dot11 el-icon-caret-right"></div>
    <div class="dot dot11_1 el-icon-caret-right"></div>
    <div class="dot dot11_2 el-icon-caret-right"></div>
    <div class="dot dot11_3 el-icon-caret-right"></div>
    <div class="dot dot11_4 el-icon-caret-right"></div>
    <div class="dot dot11_5 el-icon-caret-right"></div>


    <img class="bg-img" src="./bg.png" alt="" srcset="">
  </div>
</body>

</html>

分组加表头


    mergeCellsSlot: function (hsid = 'orderNum', key = 'kkk') {
      this.dataSource = [
        { name: '康师傅冰红茶   1L', price: 5, num: 1, sum: 5, buyer: '张三18030611111', send: '配送上门', sendDetail: "甘肃酒泉肃州区电信大厦801", remark: '要冰的', buyerName: "全家超市", orderNum: "102", orderTime: "2024/06/05", orderState: "待发货" },
        { name: '康师傅冰红茶   1L', price: 5, num: 1, sum: 5, buyer: '张三18030611111', send: '配送上门', sendDetail: "甘肃酒泉肃州区电信大厦801", remark: '要冰的', buyerName: "全家超市", orderNum: "101", orderTime: "2024/06/05", orderState: "待发货" },
        { name: '康师傅冰红茶   1L', price: 5, num: 1, sum: 5, buyer: '张三18030611111', send: '配送上门', sendDetail: "甘肃酒泉肃州区电信大厦801", remark: '要冰的', buyerName: "全家超市", orderNum: "101", orderTime: "2024/06/05", orderState: "待发货" },
        { name: '康师傅冰红茶   1L', price: 5, num: 1, sum: 5, buyer: '张三18030611111', send: '配送上门', sendDetail: "甘肃酒泉肃州区电信大厦801", remark: '要冰的', buyerName: "全家超市", orderNum: "102", orderTime: "2024/06/05", orderState: "待发货" },
        { name: '康师傅冰红茶   1L', price: 5, num: 1, sum: 5, buyer: '张三18030611111', send: '配送上门', sendDetail: "甘肃酒泉肃州区电信大厦801", remark: '要冰的', buyerName: "全家超市", orderNum: "102", orderTime: "2024/06/05", orderState: "待发货" },
        { name: '康师傅冰红茶   1L', price: 5, num: 1, sum: 5, buyer: '张三18030611111', send: '配送上门', sendDetail: "甘肃酒泉肃州区电信大厦801", remark: '要冰的', buyerName: "全家超市", orderNum: "103", orderTime: "2024/06/05", orderState: "待发货" },
      ]
      let array = this.dataSource.reduce((result, item) => {
        if (result.indexOf(item[hsid]) < 0) {
          result.push(item[hsid]);
        }
        return result;
      }, [])
        .reduce((result, keys) => {
          const children = this.dataSource.filter((item) => item[hsid] === keys);
          if(children[0]) {
            result = result.concat({
              ...children[0],
              isTitle: true,
            })
          }
          result = result.concat(children)
          return result;
        }, [])
        console.log(array);
      // this.dataSource = array;
    },

合并单元格

	// 合并单元格
    mergeCellsSlot: function (hsid, key) {
      let array = this.dataSource.reduce((result, item) => {
        if (result.indexOf(item[hsid]) < 0) {
          result.push(item[hsid]);
        }
        return result;
      }, [])
      .reduce((result, keys) => {
        const children = this.dataSource.filter((item) => item[hsid] === keys);
        result = result.concat(
          children.map((item, index) => ({
            ...item,
            [`${key}RowSpan`]: index === 0 ? children.length : 0
          }))
        )
        return result;
      }, [])
      this.dataSource = array;
    },

动态流星动画

使用方法：
1：以下代码复制到.vue文件中
2：将控制台打印的styleArr.join(‘’)结果赋值到css模块中，即可看见流星效果
在这里插入图片描述

<template>
  <div class="shooting_star_box">
    <div
      class="shooting_star"
      v-for="(item, idx) in keyframes"
      :key="idx"
      :style="item.animation"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyframes: []
    }
  },
  mounted() {
    this.insertKeyframes()
  },
  methods: {
    insertKeyframes() {
      let styleArr = [], keyframes = []
      for (let idx = 0; idx < 30; idx++) {
        keyframes.push({
          id: idx,
          animation: `animation: tail 3000ms ease-in-out infinite, shooting${idx % 20} 3000ms ease-in-out infinite;animation-delay: ${Math.floor(Math.random() * 6)}s`
        })
        let x = Math.floor(Math.random() * 61 - 10)
        let y = Math.floor(Math.random() * 61 - 10)
        styleArr.push(`@keyframes shooting${idx} {0% {right: ${x}%;top: ${y}%;}100% {right: ${x + 60}%;top: ${y + 60}%;}}`)
      }
      this.keyframes = keyframes
      console.log(styleArr.join(''));
    },
  }
}
</script>


  <style>
.shooting_star_box {
  background-color: black;
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.shooting_star {
  transform: rotateZ(-35deg);
  position: absolute;
  height: 2px;
  background: linear-gradient(45deg, #fff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #fff);
}
@keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 130px;
  }

  100% {
    width: 0;
  }
}
</style>

波纹滤镜filter: url(#fractal);
在这里插入图片描述

<style>
.shooting_star_box{
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  filter: url(#fractal);
}
.shooting_star {
  transform: rotateZ(-35deg);
  position: absolute;
  height: 2px;
  background: linear-gradient(45deg, #fff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #fff);
}
@keyframes tail {
  0% {
    width: 0
  }

  30% {
    width: 130px
  }

  100% {
    width: 0
  }
}
</style>
 <div class="shooting_star_box">
   <div class="shooting_star" v-for="item in keyframes" :style="item.animation"></div>
 </div>
      <svg>
        <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
          <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.005 0.005" numOctaves="10">
            <animate attributeName="baseFrequency" dur="300s" values="0.005 0.005;0.05 0.3;0.005 0.005" repeatCount="indefinite" />
          </feTurbulence>
          <feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
        </filter>
      </svg>

insertKeyframes() {
  let styleArr = [], keyframes = []
  for (let idx = 0; idx < 30; idx++) {
    keyframes.push({
      id: idx,
      animation: `animation: tail 3000ms ease-in-out infinite, shooting${idx % 20} 3000ms ease-in-out infinite;animation-delay: ${Math.floor(Math.random() * 6)}s`
    })
    let x = Math.floor(Math.random() * 61 - 10)
    let y = Math.floor(Math.random() * 61 - 10)
    styleArr.push(`@keyframes shooting${idx} {0% {right: ${x}%;top: ${y}%;}100% {right: ${x + 60}%;top: ${y + 60}%;}}`)
  }
  this.keyframes = keyframes
  console.log(styleArr.join(''));
},

js获取随机数

function createRandom(minNum, maxNum) {
            return Math.floor(Math.random() * (maxNum - minNum + 1) + minNum);
        }

递归查DOM

// 深度优先，代码简单易懂，效率比不上非递归实现
function getElementById(node, id) {
    if(!node) return null
    if(node.id === id) return node
    for (let i = 0; i < node.childNodes.length; i++) {
      let found = getElementById(node.childNodes[i], id);
      if(found) return found
    }
    return null
  }


      getRegion(treeData, nodeId) {
        // 遍历当前层级的所有节点
        for (var i = 0; i < treeData.length; i++) {
          var node = treeData[i];
          // 如果当前节点的 ID 匹配目标节点的 ID，则返回当前节点
          let fullId = node.id + '000000000'
          fullId = fullId.slice(0, 9);
          // console.log(fullId, nodeId);
          if (fullId === nodeId) {
            return node;
          }
          // 如果当前节点有子节点，则递归调用当前函数继续查找子节点
          if (node.children && node.children.length > 0) {
            var foundNode = this.getRegion(node.children, nodeId);
            // 如果在子节点中找到了目标节点，则返回找到的节点
            if (foundNode) {
              return foundNode;
            }
          }
        }
        // 如果遍历完所有节点仍未找到目标节点，则返回 null
        return null;
      },


      getRegion(treeData, nodeId, arr) {
        // 遍历当前层级的所有节点
        for (var i = 0; i < treeData.length; i++) {
          var node = treeData[i];
          console.log('run');
          // 节省递归次数
          if(!nodeId.includes(node.id)) {
            continue;
          }
          arr.push(node)
          // 如果当前节点的 ID 匹配目标节点的 ID，则返回当前节点
          let fullId = node.id + '000000000'
          fullId = fullId.slice(0, 9);
          // console.log(fullId, nodeId);
          if (fullId === nodeId) {
            return node;
          }
          // 如果当前节点有子节点，则递归调用当前函数继续查找子节点
          if (node.children && node.children.length > 0) {
            var foundNode = this.getRegion(node.children, nodeId, arr);
            // 如果在子节点中找到了目标节点，则返回找到的节点
            if (foundNode) {
              return foundNode;
            }
          }
        }
        // 如果遍历完所有节点仍未找到目标节点，则返回 null
        return null;
      },

          let arr = []
          let res = this.getRegion(this.regionList, orgId, arr)
          console.log(res,'ssss', arr);

jquery表单格式化

  <form action="/search" id="form-se">
    <input type="search" name="keyword">
    <input type="number" name="price">
  </form>
  <script>
  $.fn.serializeForm = function () {
    let o = {}, a = this.serializeArray()
    $.each(a, function () {
      if(o[this.name]!==undefined){
        if(!o[this.name].push){
          o[this.name] = [o[this.name]]
        }
        o[this.name].push(this.value || '')
      }else{
        o[this.name] = this.value || ''
      }
    })
    return o
  }
  
  console.log($('#form-se').serializeForm(),   $('#form-se')[0].submit); // {keyword: "", price: ""},  fn...
  console.log(JSON.stringify($('#form-se').serializeArray()),   $('#form-se').serialize()); // [{"name":"keyword","value":""},{"name":"price","value":""}],  keyword=&price=
</script>

图片懒加载

渲染页面的时候别把图片地址放到src上，放到data-src中。注意img标签的src要写成about:blank，不要写成错误的地址或者空白。


  <picture>
    <source data-srcset="photo.jpg" />
    <img data-src="photo.jpg" src="about:blank" alt="" />
  </picture>
<script>
// 防抖和节流：https://blog.csdn.net/weixin_44116302/article/details/119447462
  class ImgLazyLoad {
    constructor(imgContainers) {
      this.$imgContainers = imgContainers
      this.shownCount = 0
    }
    // 位置判断，监听scroll事件
    showImage(leftSpace = 500) {
      let scrollTop = $window.scrollTop()
      let $containers = this.$imgContainers,
        scrollPosition = $window.scrollTop() + $window.height()
      for (let i = 0; i < $containers.length; i++) {
        let $container = $containers.eq(i);
        // 即将滑倒图片位置
        if ($container.offset().top - scrollPosition < leftSpace) {
          this.ensureImagSrc($container)
        }
      }
    }
    ensureImagSrc($container) {
      let $source = $container.find('source')
      if ($source.length && !$source.attr('srcset')) {
        $source.attr('srcset', $source.data('srcset'))
      }
      let $img = $container.find('img:not(.loading)')
      if ($img.length && !$img.attr('src').indexOf('//') < 0) {
        $img.attr('src', $source.data('src'))
        this.shownCount++
      }
    }
    init() {
      // 初始化
      let leftSpace = 0
      this.showImage(leftSpace)
      // 滚动
      $window.on('scroll', this, this.throttleShow)
    }
    outsureImagSrc($container) {
      // 全部显示则 off
      if(this.shownCount>=this.allCount){
        $window.off('scroll', this.throttleShow)
      }
    }
  }
</script>

开关switch


  <style>
    * {
      margin: 0;
      padding: 0;
    }

    input {
      display: none;
    }

    label {
      margin: 50px;
      display: block;
      width: 200px;
      height: 60px;
      border-radius: 30px;
      background: rgb(128, 128, 128);
      border: 1px solid #eee;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    label span.before {
      display: block;
      content: '';
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: white;
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
      transition: all .3s;
    }

    label span.after {
      display: block;
      content: '';
      width: 0;
      height: 100%;
      background: #006BB0;
      transition: all .3s;
      border-radius: 10px;
    }

    input:checked~span.before {
      left: 140px;
    }

    input:checked~span.after {
      width: 100%;
    }
  </style>
  
  <label>
    <input checked type="checkbox">
    <span class="before"></span>
    <span class="after"></span>
  </label>

数据转大写

// 来源： https://blog.csdn.net/k8080880/article/details/53504028
function smalltoBIG(n)   
{  
    var fraction = ['角', '分'];  
    var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];  
    var unit = [ ['', '万', '亿'], ['', '拾', '佰', '仟']  ];  
    var head = n < 0? '欠': '';  
    n = Math.abs(n);  
 
    var s = '';  
 
    for (var i = 0; i < fraction.length; i++)   
    {  
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');  
    }  
    s = s || '';  
    n = Math.floor(n);  
 
    for (var i = 0; i < unit[0].length && n > 0; i++)   
    {  
        var p = '';  
        for (var j = 0; j < unit[1].length && n > 0; j++)   
        {  
            p = digit[n % 10] + unit[1][j] + p;  
            n = Math.floor(n / 10);  
        }  
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')  + unit[0][i] + s;  
    }  
    return head + s.replace(/(零.)+/g, '零') 
}

移动端开发(底部按钮固定定位被软键盘顶上来问题)

// https://www.csdn.net/tags/MtTaMg0sMzg2OTIzLWJsb2cO0O0O.html
mounted() {
	//首次进入的原始高度
	this.originalHeight = window.innerHeight;
	window.addEventListener('resize', this.watchResize);
},
beforeDestroy() {
	window.removeEventListener("resize", this.watchResize);
},
watch: {
	screenHeight(newHeight) { 
		// 解决安卓底部固定部位被软键盘顶上去问题
		//监听屏幕高度变化  
		var btnDOM = document.getElementById("fixBtn")
		if(newHeight < this.originalHeight){
			btnDOM .style.position = 'static';
		}else {
			btnDOM .style.position = 'fixed';
		}
	}
}
methods: {
	watchResize() {
		//实时变化的窗口高度
		this.screenHeight = window.innerHeight;
	}
}

原生打印

  function printInit() {
    const Print = function (dom, options) {
      if (!(this instanceof Print)) return new Print(dom, options);

      this.options = this.extend({
        'noPrint': '.no-print'
      }, options);

      if ((typeof dom) === "string") {
        this.dom = document.querySelector(dom);
      } else {
        this.isDOM(dom)
        this.dom = this.isDOM(dom) ? dom : dom.$el;
      }

      this.init();
    };
    Print.prototype = {
      init: function () {
        var content = this.getStyle() + this.getHtml();
        this.writeIframe(content);
      },
      extend: function (obj, obj2) {
        for (var k in obj2) {
          obj[k] = obj2[k];
        }
        return obj;
      },

      getStyle: function () {
        var str = "",
          styles = document.querySelectorAll('style,link');
        for (var i = 0; i < styles.length; i++) {
          str += styles[i].outerHTML;
        }
        str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";

        return str;
      },

      getHtml: function () {
        var inputs = document.querySelectorAll('input');
        var textareas = document.querySelectorAll('textarea');
        var selects = document.querySelectorAll('select');

        for (var k = 0; k < inputs.length; k++) {
          if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
            if (inputs[k].checked == true) {
              inputs[k].setAttribute('checked', "checked")
            } else {
              inputs[k].removeAttribute('checked')
            }
          } else if (inputs[k].type == "text") {
            inputs[k].setAttribute('value', inputs[k].value)
          } else {
            inputs[k].setAttribute('value', inputs[k].value)
          }
        }

        for (var k2 = 0; k2 < textareas.length; k2++) {
          if (textareas[k2].type == 'textarea') {
            textareas[k2].innerHTML = textareas[k2].value
          }
        }

        for (var k3 = 0; k3 < selects.length; k3++) {
          if (selects[k3].type == 'select-one') {
            var child = selects[k3].children;
            for (var i in child) {
              if (child[i].tagName == 'OPTION') {
                if (child[i].selected == true) {
                  child[i].setAttribute('selected', "selected")
                } else {
                  child[i].removeAttribute('selected')
                }
              }
            }
          }
        }

        return this.dom.outerHTML;
      },

      writeIframe: function (content) {
        var w, doc, iframe = document.createElement('iframe'),
          f = document.body.appendChild(iframe);
        iframe.id = "myIframe";
        //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
        iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
        w = f.contentWindow || f.contentDocument;
        doc = f.contentDocument || f.contentWindow.document;
        doc.open();
        doc.write(content);
        doc.close();
        var _this = this
        iframe.onload = function () {
          _this.toPrint(w);
          setTimeout(function () {
            document.body.removeChild(iframe)
          }, 100)
        }
      },

      toPrint: function (frameWindow) {
        try {
          setTimeout(function () {
            frameWindow.focus();
            try {
              if (!frameWindow.document.execCommand('print', false, null)) {
                frameWindow.print();
              }
            } catch (e) {
              frameWindow.print();
            }
            frameWindow.close();
          }, 10);
        } catch (err) {
          console.log('err', err);
        }
      },
      isDOM: (typeof HTMLElement === 'object') ?
        function (obj) {
          return obj instanceof HTMLElement;
        } :
        function (obj) {
          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
        }
    };
    Vue.prototype.$print = Print
    printScInit()
  }

pdf预览

<!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>
        iframe{
            width: 800px;
            height: 900px;
        }
    </style>
</head>
<body>

pdf插件文件夹和html文件同级
    <!-- http://t.zoukankan.com/liangziaha-p-12486766.html -->
    <!-- http://192.168.1.101:5500/baoxiao.pdf https://files.cnblogs.com/files/liangziaha/pdf.7z  是pdf的地址-->
    
    <iframe src="./pdf/web/viewer.html?file=http://192.168.1.101:5500/baoxiao.pdf" frameborder="0" ></iframe>
</body>
</html>

ajax简易

const ajax = {
  get(url, fn) {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        fn(xhr.responseText)
      }
    }
    xhr.send()
  },
  post(option) {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', option.url, true)
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        option.success(xhr.responseText)
      }
    }
    xhr.send(option.data)
  }
}
ajax.post({
      type: "POST",
      data: "tyshxydm=91510100MA62N1403D",//在fixFooter定义
      dataType: "json",
      url: "http://192.168.76.23:8080/instrument/services/v1/ent/common/queryEntInfoByTyshxydm",
      success: function (result) {
        if (result.serviceSuccess) {
          console.log(result);
        } else {
        }
      }
    });

节流防抖

// 节流：限制一个动作在一段时间内只能执行一次
function throttle (fn,delay){
    let timer = null
    return ()=>{
        if (timer){return}
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);       
    }
}
// 防抖：当一个动作连续触发，只执行最后一次。
function debounce(fn,delay){
    let timer = null
    return ()=>{
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);
    }
}
function debounceResize(){
    let timer = null
    return ()=>{
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            resizePage()
            timer = null
        }, 300);
    }
}
function resizePage(){}
window.addEventListener("resize", debounceResize());

获取地址栏参数

function getUrlParams() {
  var vars = {}
  window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function (m, key, value) {
      vars[key] = value
    }
  )
  return vars
}
//https://www.jianshu.com/p/e012deb3cdaf

缩放不影响页面布局，宽1920px

	// 页面缩放不影响样式---------start
    function resizePage() {
        let scaleWidthPercent = (document.documentElement.clientWidth * 1.0) / 1920;
        let el = document.querySelector("#app-login")
        el.style.transform =
        "scale(" + scaleWidthPercent + ")";
        el.style["transform-origin"] = "left top";
        el.style["height"] = "969px";
        el.style["width"] = "1920px";
    }
    window.addEventListener("load", resizePage);
    window.addEventListener("resize", resizePage);
    // 页面缩放不影响样式---------end

获取当前日期n个月后/月前的日期

/**
 * By James.wang
 * @description: 获取当前日期n个月后/月前的日期
 * @param {String} n 几个月（为负数则表示前面的日期）
 * @return: 日期
 */
function diffMonth(n){
    var dt = new Date();
    dt.setMonth(dt.getMonth() + Number(n));
    return dt.toLocaleString().replace(/\//g, '-') ;
}

https://www.cnblogs.com/firstcsharp/p/16467847.html

标题导出页面 excel表格

        exportTable() {
            console.log(this.$refs.table_qyhzqk.outerHTML)
            var html =
                "<html><head><meta charset='utf-8' /></head><body>" +
                this.$refs.table_qyhzqk.outerHTML +
                '</body></html>'
            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: 'application/vnd.ms-excel' })
            var a = document.createElement('a') //这里也可以通过指定id进行获取
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob)
            // 设置文件名
            a.download = '生产企业汇总表.xls'
            a.click()
        },