小的项目效果

沁染流年

已于 2022-08-26 15:57:59 修改

阅读量100

点赞数

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

于 2022-08-08 20:42:43 首次发布

本文链接：https://blog.csdn.net/weixin_49210760/article/details/126235718

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1 . 拓展卡片（类似手风琴）

<!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>
      .container {
        width: 900px;
        height: 400px;
        display: flex;
      }
      .panel {
        flex: 1;
        border-radius: 10px;
        margin: 5px;
        background: url('https://img1.baidu.com/it/u=3715687718,3093898249&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
        background-size: cover;
        position: relative;
        transition: all 0.7s ease-in;
      }
      .panel.active {
        flex: 8;
      }
      .panel h3 {
        color: green;
        position: absolute;
        left: 5px;
        bottom: 20px;
        opacity: 0;
      }
      .panel.active h3 {
        opacity: 1;
        transition: opacity .5s ease-in 0.4s;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="panel active">
        <h3>新世界</h3>
      </div>
      <div class="panel">
        <h3>新世界</h3>
      </div>
      <div class="panel">
        <h3>新世界</h3>
      </div>
      <div class="panel">
        <h3>新世界</h3>
      </div>
      <div class="panel">
        <h3>新世界</h3>
      </div>
    </div>
  </body>
  <script>
    let panels = Array.from(document.getElementsByClassName('panel'))
    panels.forEach(panel => {
      panel.addEventListener('click', function(){
        removeClassName()
        if(!this.classList.contains('active')){
          this.classList.add('active')
        }
      })
    })
    function removeClassName(target){
      panels.forEach((panel)=>{
        if(target!== panel){
          panel.classList.remove('active')
        }
      })
    }
  </script>
</html>

2.步骤条

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
      :root {
        --line-border-fill: #3498db;
        --line-border-empty: yellow;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        width: 400px;
        height: 200px;
        margin: 100px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .step_circle {
        display: flex;
        width: 100%;
        margin-bottom: 30px;
        position: relative;
        justify-content: space-between;
      }
      .step_circle::before {
        /* 被覆盖 */
        content: "";
        background-color: var(--line-border-empty);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 4px;
        width: 100%;
        z-index: -1;
      }
      #process {
        /* 覆盖 */
        background-color: var(--line-border-fill);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 4px;
        width: 0%;
        z-index: -1;
        transition: all 0.4s ease;
      }
      .step {
        background-color: #f6f7fb;
        color: #999;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        border: 3px solid var(--line-border-empty);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .step.active {
        border: 3px solid var(--line-border-fill);
      }
      .btn:disabled {
        background-color: var(--line-border-empty);
        cursor: not-allowed;
      }
      .btn {
        background-color: var(--line-border-fill);
        color:green;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        padding: 8px 30px;
        margin: 5px;
        font-size: 14px;
      }

      .btn:active {
        transform: scale(0.98);
      }

      .btn:focus {
        outline: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="step_circle">
        <!-- 一开始对于进度条是都想用伪元素去做的，最后发现伪元素的获取和设置属性不方  -->
        <div id="process"></div>
        <div class="step active">1</div>
        <div class="step">2</div>
        <div class="step">3</div>
        <div class="step">4</div>
      </div>

      <div class="btns">
        <button id="prev" class="btn">上一个</button>
        <button id="next" class="btn">下一个</button>
      </div>
    </div>
  </body>
  <script>
    // 获取所有的进度圆

    const steps = document.querySelectorAll(".step");
    const stepsLen = steps.length - 1;

    // 获取按钮
    const prev_btn = document.getElementById("prev");
    const next_btn = document.getElementById("next");

    // 获取进度条
    const porcess = document.querySelector("#process");

    let activeIndex = 1;
    prev_btn.addEventListener("click", () => {
      activeIndex--;
      if (activeIndex < 1) {
        activeIndex = 1;
      }
      updateDom();
      updateProcess();
    });
    next_btn.addEventListener("click", () => {
      activeIndex++;
      if (activeIndex > steps.length) {
        activeIndex = steps.length;
      }
      updateDom();
      updateProcess();
    });

    function updateDom() {
      steps.forEach((step, index) => {
        if (index < activeIndex) {
          // 说明这些都是已经走过的元素
          if (!step.classList.contains("active")) {
            step.classList.add("active");
          }
        } else {
          step.classList.remove("active");
        }
      });
    }

    function updateProcess() {
      const actives = document.querySelectorAll(".active").length - 1;
      // 这里的计算使用数量进行计算，否则显示的时候宽度会有样式变化 
      // 一开始使用的是 激活的actives 的 length  以及 steps的length ，后面 改为 -1 数量
      const Wpx = (actives / stepsLen) * 100 + "%";
      console.log(Wpx, actives, stepsLen);
      porcess.style.width = Wpx;
      if (activeIndex === 1) {
        prev_btn.disabled = true;
      } else if (activeIndex === steps.length) {
        next_btn.disabled = true;
      } else {
        prev_btn.disabled = false;
        next_btn.disabled = false;
      }
    }
    function init() {
      updateDom();
      updateProcess();
    }
    init();
  </script>
</html>

3 选择菜单

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Lato', sans-serif;
      background-color: #333;
      color: #222;
      overflow-x: hidden;
      margin: 0;
    }

    .container {
      background-color: #fafafa;
      width: 100vw;
      min-height: 100vh;
      padding: 50px;
      /* 修改旋转的点位置
       */
      transform-origin: top left;
      transition: transform 0.5s linear;
    }

    .container.show_nav {
      transform: rotate(-20deg);

    }


    .btns_container {
      color: white;
      font-size: 16px;
      position: fixed;
      left: -100px;
      top: -100px;

    }

    .circle {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      transition: transform 0.5s linear;
      background-color: #ff7979;

    }

    .container.show_nav .circle {
      transform: rotate(-90deg);
    }

    .btns_container button {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 40%;
      cursor: pointer;
      background-color: transparent;
      border: 0;
      outline: none;
    }

    #close {
      transform: rotate(90deg);
      transform-origin: top left;
    }

    .content img {
      max-width: 100%;
    }

    .content {
      max-width: 1000px;
      margin: 50px auto;
    }

    .content h1 {
      margin: 0;
    }

    .content small {
      color: #555;
      font-style: italic;
    }

    .content p {
      color: #333;
      line-height: 1.5;
    }

    nav {
      position: fixed;
      bottom: 50px;
      left: 0;
    }


    /* 对于菜单来说 ，并没有进行旋转 */
    /* 而是使用x偏移  运动后归零 */
    nav ul {
      color: black;
      list-style-type: none;
      padding-left: 30px;
    }

    nav ul li {
      text-transform: uppercase;
      color: white;
      margin: 40px 0;
      transform: translateX(-100%);
      transition: transform 0.4s ease-in;
    }

    nav ul li+li {
      margin-left: 15px;
      transform: translateX(-150%);
    }

    nav ul li+li+li {
      margin-left: 30px;
      transform: translateX(-200%);
    }

    .container.show_nav + nav li {
      transform: translateX(0);
      transition-delay: 0.3s;
    }
  </style>
</head>

<body>
  <div class="container">

    <!-- 操作旋转按钮 -->
    <!-- 这一层用来固定位置 -->
    <div class="btns_container">

      <div class="circle">
        <button id="open">开启</button>
        <button id="close">关闭</button>
      </div>

    </div>
 

    <!-- 主内容 -->
    <div class="content">
      <h1>Amazing Article</h1>
      <small>Florin Pop</small>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime
        aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores
        recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime
        dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem,
        molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae
        temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur
        perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.
      </p>

      <h3>My Dog</h3>
      <img
        src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
        alt="doggy" />
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel
        consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam
        placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia
        cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates
        sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>
    </div> 


    <!-- 小菜单 -->
  
  </div>

  <nav>
    <ul>
      <li> Home</li>
      <li>About</li>
      <li> Contact</li>
    </ul>
  </nav>
</body>
<script>
  const open_btns = document.getElementById('open')
  const close_btns = document.getElementById('close')
  const container = document.querySelector('.container')
  open_btns.addEventListener('click', () => container.classList.add('show_nav'))

  close_btns.addEventListener('click', () => container.classList.remove('show_nav'))
</script>

</html>

4隐藏搜索框

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .container {
        height: 100vh;
        background-color: green;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .search_bar {
        position: relative;
        font-size: 18px;
        height: 50px;
      }
      #search,
      #btn {
        background-color: white;
        height: 100%;
        width: 50px;
        border: 0;
      }
      #search:focus,
      #btn:focus {
        outline: none;
      }

      #search {
        font-size: 18px;
        padding: 15px;
        border: 0;
        transition: width 0.3s ease;
      }
      #btn {
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
        transition: transform 0.3s ease;
      }


      .search_bar.active #search{
        width: 200px;
      }
      .search_bar.active #btn{
        /* width: 200px; */
        transform: translateX(198px);
        
      }
      
    </style>
  </head>
  <body>
    <div class="container">
      <div class="search_bar">
        <input type="text" id="search" placeholder="search ... "/>
        <button id="btn">搜</button>
      </div>
    </div>
  </body>
  <script>

    const search_bar = document.querySelector('.search_bar')
    const btn = document.getElementById('btn')
    const search = document.getElementById('search')
    btn.addEventListener('click',()=>{
      search_bar.classList.toggle('active')
      search.focus()
    })
  </script>
</html>

5输入框波浪效果

<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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: steelblue;
      }
      .container {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        padding: 20px 40px;
      }
      h1 {
        text-align: center;
        margin-bottom: 30px;
      }
      #btn {
        cursor: pointer;
        width: 100%;
        padding: 15px;
        border: 0;
        background-color: lightblue;
        border-radius: 5px;
        margin-bottom: 30px;
      }
      #btn:focus {
        outline: none;
      }
      #btn:active {
        transform: scale(0.99);
      }
      a {
        color: lightblue;
        text-decoration: none;
      }
      .control {
        position: relative;
        margin-bottom: 40px;
      }
      .control input {
        padding: 15px 0;
        border: none;
        color: white;
        background-color: transparent;
        border-bottom: 2px solid white;
        width: 100%;
        font-size: 18px;
      }
      .control input:focus,
      /* valid 输入校验 */
      .control input:valid {
          outline: none;
          border-bottom-color: lightblue;
        }

      .control label {
        position: absolute;
        left: 0;
        top: 15px;

        /* 为了在label 上面也显示 输入 情况 */
        /* 下面的样式选择 一个   推荐当前设置的这个 */
        /* z-index: -1; */
        pointer-events: none;
      }

      /* 通过span 样式来调整 */
      .control label span {
        display: inline-block;
        font-size: 18px;
        min-width: 5px;
        /* cubic-bezier 贝塞尔曲线 */
        transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
      .control input:focus + label span
     {
        color: lightblue;
        transform: translateY(-30px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Please Login</h1>
      <form class="login_form">
        <div class="control">
          <input type="text" />
          <label>Email</label>
          <!-- <label>
            <span style="transition-delay: 0ms">E</span>
            <span style="transition-delay: 50ms">m</span>
            <span style="transition-delay: 100ms">a</span>
            <span style="transition-delay: 150ms">i</span>
            <span style="transition-delay: 200ms">l</span>
          </label> -->
        </div>

        <div class="control">
          <input type="password" />
          <label>Password</label>
        </div>

        <button id="btn">LOGIN</button>
        <p>Don't have an account? <a href="#">Register</a></p>
      </form>
    </div>
  </body>
  <script>
    const labels = document.querySelectorAll('.control label')
    labels.forEach((label, idx) => {
      label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
        .join('')
    })
  </script>
</html>

6 倒计时

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <style></style>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        color: white;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #8e44ad;
      }
      .container {
        width: 800px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .count-cotainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 30px 50px;
      }
      .counter {
        font-size: 60px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="count-cotainer">
        <i class="fab fa-twitter fa-3x"></i>
        <div class="counter" data-target="12000"></div>
        <span>Twitter Followers</span>
      </div>
      <div class="count-cotainer">
        <i class="fab fa-youtube fa-3x"></i>
        <div class="counter" data-target="5000"></div>
        <span>YouTube Subscribers</span>
      </div>
      <div class="count-cotainer">
        <i class="fab fa-facebook fa-3x"></i>
        <div class="counter" data-target="7500"></div>
        <span>Facebook Fans</span>
      </div>
    </div>
  </body>
  <script>
    const counters = document.querySelectorAll(".counter");
    const steps = 200;
    const updateDom = (ele) => {
      const targetCount = ele.dataset.target;
      const currentTarget = +ele.innerText;
      const increment = targetCount / steps;
      if (currentTarget > targetCount) {
        ele.innerText = targetCount;
      
      } else {
        ele.innerText = `${Math.ceil(currentTarget + increment)}`;
        setTimeout(() => {
          // 递归调用
          updateDom(ele);
        },2);
      }
    };
    counters.forEach((ele) => {
      updateDom(ele);
    });
  </script>
</html>

加载动画

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        * {
  box-sizing: border-box;
}

body {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.kinetic {
  position: relative;
  height: 80px;
  width: 80px;
}

.kinetic::after,
.kinetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #fff;
  
}
.kinetic::after{
  border-bottom-color: red;

animation: rotateA 2s linear infinite 0.5s;
}

.kinetic::before {
  transform: rotate(90deg);
  animation: rotateB 2s linear infinite;
}

@keyframes rotateA {
  0%,
  25% {
    transform: rotate(0deg);
  }

  50%,
  75% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateB {
  0%,
  25% {
    transform: rotate(90deg);
  }

  50%,
  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(450deg);
  }
}
    </style>
</head>
<body>
    <div class="kinetic"></div>
</body>
  </html>

随机密码生成

<!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>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
    crossorigin="anonymous" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #3b3b98;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    #container {
      background-color: #23235b;
      width: 350px;
      box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
      padding: 20px;
    }

    h2 {
      margin: 10px 0 20px;
      text-align: center;
    }

    .result-container {
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      font-size: 18px;
      letter-spacing: 1px;
      padding: 12px 10px;
      height: 50px;
      width: 100%;
    }

    .result-container #result {
      word-wrap: break-word;
      max-width: calc(100% - 40px);
    }

    .result-container .btn {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 40px;
      height: 40px;
      font-size: 20px;
    }

    .btn {
      border: none;
      background-color: #3b3b98;
      color: #fff;
      font-size: 16px;
      padding: 8px 12px;
      cursor: pointer;
    }

    .btn-large {
      display: block;
      width: 100%;
    }

    .setting {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;
    }
  </style>
</head>

<body>
  <div id="container">
    <h2>Password Generator</h2>
    <div class="result-container">
      <span id="result"></span>
      <button class="btn" id="clipboard">
        <i class="far fa-clipboard"></i>
      </button>
    </div>

    <div class="settings">
      <div class="setting">
        <label>Password Length</label>
        <input type="number" id="length" min="4" max="20" value="20">
      </div>
      <div class="setting">
        <label>Include uppercase letters</label>
        <input type="checkbox" id="uppercase" checked>
      </div>
      <div class="setting">
        <label>Include lowercase letters</label>
        <input type="checkbox" id="lowercase" checked>
      </div>
      <div class="setting">
        <label>Include numbers</label>
        <input type="checkbox" id="numbers" checked>
      </div>
      <div class="setting">
        <label>Include symbols</label>
        <input type="checkbox" id="symbols" checked>
      </div>
    </div>
    <button class="btn btn-large" id="generate">
      Generate Password
    </button>
  </div>


  </div>
</body>
<script>
  const resultEl = document.getElementById('result')
  const lengthEl = document.getElementById('length')
  const uppecaseEL = document.getElementById('uppercase')
  const lowercaseEl = document.getElementById('lowercase')
  const numbersEl = document.getElementById('numbers')
  const symbolsEl = document.getElementById('symbols')
  const generateEl = document.getElementById('generate')
  const clipboardEl = document.getElementById('clipboard')



  generateEl.addEventListener('click', () => {

    const length = lengthEl.value * 1
    const hasUpper = uppecaseEL.checked
    const hasLower = lowercaseEl.checked
    const hasNumber = numbersEl.checked
    const hasSymbol = symbolsEl.checked

    const randomFunc = {
      lower: getRandomLower,
      upper: getRandomUpper,
      number: getRandomNumber,
      symbol: getRandomSymbol
    }
    resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)


    function getRandomLower() {
      return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
    }

    function getRandomUpper() {
      return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
    }

    function getRandomNumber() {
      return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
    }

    function getRandomSymbol() {
      const symbols = '!@#$%^&*(){}[]=<>/,.'
      return symbols[Math.floor(Math.random() * symbols.length)]
    }


    function generatePassword(lower, upper, number, symbol, length) {
      let generatedPassword = ''
      // 计算目前勾选的按钮的个数
      const typesCount = lower + upper + number + symbol

      // 这个是过滤出勾选的按钮和需要触发的事件类型
      const typesArr = [{
        lower
      }, {
        upper
      }, {
        number
      }, {
        symbol
      }].filter(item => Object.values(item)[0])

      // 一个都没勾选返回空字符串
      if (typesCount === 0) {
        return ''
      }

      for (let i = 0; i < length; i += typesCount) {
        typesArr.forEach(type => {
          const funcName = Object.keys(type)[0] // 获得触发类型

          // 进行回调函数执行
          generatedPassword += randomFunc[funcName]()
        })
      }

      const finalPassword = generatedPassword.slice(0, length)

      return finalPassword
    }

  })
</script>

</html>