ToolBox
/
password.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>工具箱 | 开发工具箱</title>
  <meta name="keyworks" content="工具箱,开发人员工具箱,开发工具箱,程序员工具箱">
  <meta name="description" content="提供开发人员常用的工具">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .footer {
      line-height: 5rem;
      color: #555555
    }

    #content-password span {
      display: list-item;
      color: #fff;
      background-color: #28a745;
      padding: .75em 1.4em;
      margin: 5px auto;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25rem;
      transition: color .15s;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <header style="margin-bottom:30px">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="/">开发工具箱</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="https://www.itzcy.com" target="_blank">辰云博客</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="/about.html">关于工具箱</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="body-content container">
    <div class="row">
      <div class="col-sm-1"></div>
      <form class="col-sm-10">
        <div class="form-group row ">
          <label class="col-sm-2 col-form-label" for="exampleFormControlSelect2">长度</label>
          <div class="col-sm-10">
            <div class="custom-control custom-radio custom-control-inline">
              <input type="checkbox" checked id="number" name="number" class="custom-control-input">
              <label class="custom-control-label" for="number">0~9</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="checkbox" checked id="small_letter" name="small_letter" class="custom-control-input">
              <label class="custom-control-label" for="small_letter">a~z</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="checkbox" checked id="big_letter" name="big_letter" class="custom-control-input">
              <label class="custom-control-label" for="big_letter">A~Z</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="checkbox" id="character" name="character" class="custom-control-input">
              <label class="custom-control-label" for="character">!@#$%^&*()_+-=,./<>?;':"[]{}~`</label>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-sm-6 row">
            <label class="col-sm-2 col-form-label" for="length">长度</label>
            <div class="col-sm-8">
              <select class="form-control" id="length">
                <option value="6">6</option>
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="16">16</option>
                <option selected value="32">32</option>
                <option value="64">64</option>
                <option value="128">128</option>
              </select>
            </div>
          </div>
          <div class="col-sm-6 row">
            <label class="col-sm-2 col-form-label" for="numbers">数量</label>
            <div class="col-sm-10">
              <select class="form-control" id="numbers">
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-group row text-center">
          <button style="margin: 0 auto;" type="button" class="btn btn-primary" onclick="generate()">生成</button>
        </div>
      </form>
      <div class="col-sm-1"></div>
    </div>
    <div class="row">
      <div class="col-sm-2"></div>
      <div class="col-sm-8 text-center" id="content-password">

      </div>
      <div class="col-sm-2"></div>
    </div>

  </div>
  <div class="col-xl-12 text-center footer">
    Copyright © By ToolBox.Itzcy.com. 2019 - <script>
      document.write((new Date()).getFullYear())
    </script>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
  const HtmlUtil = {
    /*1.用浏览器内部转换器实现html编码（转义）*/
    htmlEncode: function (html) {
      //1.首先动态创建一个容器标签元素，如DIV
      var temp = document.createElement("div");
      //2.然后将要转换的字符串设置为这个元素的innerText或者textContent
      (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
      //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
      var output = temp.innerHTML;
      temp = null;
      return output;
    },
    /*2.用浏览器内部转换器实现html解码（反转义）*/
    htmlDecode: function (text) {
      //1.首先动态创建一个容器标签元素，如DIV
      var temp = document.createElement("div");
      //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
      temp.innerHTML = text;
      //3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    },
    /*3.用正则表达式实现html编码（转义）*/
    htmlEncodeByRegExp: function (str) {
      var temp = "";
      if (str.length == 0) return "";
      temp = str.replace(/&/g, "&");
      temp = temp.replace(/</g, "<");
      temp = temp.replace(/>/g, ">");
      temp = temp.replace(/\s/g, " ");
      temp = temp.replace(/\'/g, "'");
      temp = temp.replace(/\"/g, "\"");
      return temp;
    },
    /*4.用正则表达式实现html解码（反转义）*/
    htmlDecodeByRegExp: function (str) {
      var temp = "";
      if (str.length == 0) return "";
      temp = str.replace(/&/g, "&");
      temp = temp.replace(/</g, "<");
      temp = temp.replace(/>/g, ">");
      temp = temp.replace(/ /g, " ");
      temp = temp.replace(/'/g, "\'");
      temp = temp.replace(/"/g, "\"");
      return temp;
    },
    /*5.用正则表达式实现html编码（转义）（另一种写法）*/
    html2Escape: function (sHtml) {
      return sHtml.replace(/[<>&"]/g, function (c) {
        return {
          '<': '<',
          '>': '>',
          '&': '&',
          '"': '"'
        } [c];
      });
    },
    /*6.用正则表达式实现html解码（反转义）（另一种写法）*/
    escape2Html: function (str) {
      var arrEntities = {
        'lt': '<',
        'gt': '>',
        'nbsp': ' ',
        'amp': '&',
        'quot': '"'
      };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
        return arrEntities[t];
      });
    }
  };

  function generate() {
    let rawHTML = $('#content-password').html()
    let dictionaries = [
      '0123456789',
      'abcdefghijklmnopqrstuvwxyz',
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
      "!@#$%^&*()_+-=,./\<\>?;\':\"[]{}~`"
    ]

    // 计算随机字符串
    let randomStr = '';
    let number = $('#number:checked').val()
    if (number == 'on') {
      randomStr += dictionaries[0]
    }
    let small_letter = $('#small_letter:checked').val()
    if (small_letter == 'on') {
      randomStr += dictionaries[1]
    }
    let big_letter = $('#big_letter:checked').val()
    if (big_letter == 'on') {
      randomStr += dictionaries[2]
    }
    let character = $('#character:checked').val()
    if (character == 'on') {
      randomStr += dictionaries[3]
    }
    let length = parseInt($('#length').val())
    let numbers = parseInt($('#numbers').val())

    if (numbers <= 0) {
      numbers = 1
    }
    // 打乱随机字符串
    var newStrAll = [];
    randomStr.split('').forEach((item, index, array) => {
      var newIndex = Math.round(Math.random() * newStrAll.length);
      newStrAll.splice(newIndex, 0, item);
    });
    randomStr = newStrAll.join('');

    let newHTML = ''
    // 生成随机字符串
    for (let i = 1; i <= numbers; i++) {
      _str = '';
      for (var j = 0, index; j < length; j++) {
        index = Math.floor(Math.random() * randomStr.length)
        _str += randomStr[index];
      }
      // 写入
      newHTML += "<span onclick='copy(this)' data-toggle='tooltip' data-placement='right' title='点击复制'>" + HtmlUtil.htmlEncode(_str) +
        "</span>"
    }
    $('#content-password').html(newHTML + rawHTML)
    $('[data-toggle="tooltip"]').tooltip()

  }

  function copy (ele) {
    let transfer = document.createElement('input'); //创建控件
    document.body.appendChild(transfer);
    transfer.style.cssText = 'position: absolute;right: 45%;top: 80%;'
    transfer.value = $(ele).text(); // 这里表示想要复制的内容
    transfer.focus();
    transfer.select();
    if (document.execCommand('copy')) {
      document.execCommand('copy');
    }
    transfer.blur();
    document.body.removeChild(transfer); //删除控件

  }
</script>

</html>