随机密码生成器，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <section>
    <div class="container">
      <h2>随机密码生成器</h2>
      <form id="pg-form">
        <div class="result">
          <input type="text" id="result" placeholder="最少6个字符">
          <div class="clipboard">
            <ion-icon name="clipboard-outline"></ion-icon>
          </div>
        </div>
        <div>
          <div class="field">
            <label for="length">密码长度</label>
            <input type="number" id="length" value="16" min="6">
          </div>
          <div class="field">
            <label for="capital">大写字母</label>
            <input type="checkbox" id="capital" checked>
          </div>
          <div class="field">
            <label for="small">小写字母</label>
            <input type="checkbox" id="small" checked>
          </div>
          <div class="field">
            <label for="number">数字</label>
            <input type="checkbox" id="number" checked>
          </div>
          <div class="field">
            <label for="symbol">特殊字符</label>
            <input type="checkbox" id="symbol">
          </div>
        </div>
        <button class="btn_generate" type="submit">生成密码</button>
      </form>
    </div>
  </section>
  <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
</body>

</html>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

            
            @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Inter;
}

body {
  background-color: rgb(22, 25, 27);
  font-size: 18px;
  font-family: "Montserrat";
  color: rgb(212, 212, 212);
}
section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
}
.container {
  padding: 30px;
  background-color: #303538;
  border-radius: 8px;
  box-shadow: 0px 0px 20px #00000011;
  width: 90%;
  max-width: 400px;
}
.container h2{
  text-align:center;
  margin-bottom:15px
}
form {
  width: 100%;
  font-size: 20px;
}
.result {
  background-color: rgb(220, 233, 243);
  position: relative;
  margin-bottom: 30px;
  border-radius: 6px;
  overflow: hidden;
}
.result #result {
  width: 85%;
  height: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 20px;
  padding: 10px;
}
.result .clipboard {
  width: 15%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  cursor: pointer;
  background-color: royalblue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field input[type="number"] {
  width: 50px;
  height: 40px;
  outline: none;
  border: none;
  padding: 10px;
  padding-right: 0px;
  font-size: 16px;
  background-color: rgb(241, 241, 241);
  border-radius: 4px;
}
.field {
  height: 40px;
  margin-top: 5px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  padding-right: 10px;
  transition: 0.3s ease background-color;
}
.field:first-of-type {
  padding-right: 0;
}
.field:hover {
  background-color: rgb(26, 29, 31);
}
.field label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
}
.field input {
  cursor: pointer;
}

button[type="submit"] {
  display: inline-block;
  width: 100%;
  border: none;
  outline: none;
  height: 50px;
  background-color: royalblue;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-top: 30px;
  border-radius: 6px;
}
button[type="submit"]:active {
  background-color:#3159d2;
}


@media only screen and (max-width: 678px) {
  .field {
    font-size: 16px;
  }
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

            
            const resultElement = document.querySelector("#result");
const lengthElement = document.querySelector("#length");
const capitalElement = document.querySelector("#capital");
const smallElement = document.querySelector("#small");
const numberElement = document.querySelector("#number");
const specialElement = document.querySelector("#symbol");
const form = document.querySelector("#pg-form");
const clipBoard = document.querySelector(".clipboard");

const fieldsArray = [
  {
    field: capitalElement,
    getChar: getCapitalLetter
  },
  {
    field: smallElement,
    getChar: getSmallLetter
  },
  {
    field: numberElement,
    getChar: getNumber
  },
  {
    field: specialElement,
    getChar: getSpecialChar
  }
];

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const length = lengthElement.value;
  let generatePassword = "";
  const typeArray = fieldsArray.filter(({ field }) => field.checked);

  for (i = 0; i < length; i++) {
    const index = Math.floor(Math.random() * typeArray.length);
    const letter = typeArray[index].getChar();
    generatePassword += letter;
  }
  resultElement.value = generatePassword;
});

function getRandomChar(min, max) {
  const limit = max - min + 1;
  return String.fromCharCode(Math.floor(Math.random() * limit) + min);
}

function getCapitalLetter() {
  return getRandomChar(65, 90);
}

function getSmallLetter() {
  return getRandomChar(97, 122);
}

function getNumber() {
  return getRandomChar(48, 57);
}

function getSpecialChar() {
  const specialChar = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~'";
  return specialChar[Math.floor(Math.random() * specialChar.length)];
}

clipBoard.addEventListener("click", async () => {
  const text = resultElement.value;
  if (text) {
    await navigator.clipboard.writeText(text);
    alert("Copied to clipboard");
  } else {
    alert("No password to copy");
  }
});

预览

控制台