简易密码强度检查工具HTML源码-乐我知

本文将详细介绍一款基于HTML、CSS和JavaScript编写的简单密码强度检查工具，已经汉化了，在输入密码的时候会实时显示强度和改变边框颜色。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>密码强度检查</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="box">
    <h2>密码强度<span id="text">检查</span></h2>
    <input type="password" class="passwordInput" placeholder="请输入您的密码">
    <div class="password-strength"></div>
    <div class="password-strength"></div>
    <div class="password-strength"></div>
  </div>

  <script src="./js/script.js"></script>

</body>
</html>

style.css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #333;
}

.box {
  position: relative;
  width: 300px;
  height: 50px;
}

.box h2 {
  position: absolute;
  font-size: 1.25em;
  top: -40px;
  color: #fff;
  font-weight: 500;
}

.box input {
  position: absolute;
  inset: 2px;
  z-index: 10;
  border: none;
  outline: none;
  padding: 10px 15px;
  background-color: #333;
  font-size: 1em;
  color: #fff;
}

.box .password-strength {
  position: absolute;
  inset: 0;
  background: #111;
  border-radius: 5px;
  z-index: 1;
}

.box .password-strength:nth-child(3) {
  filter: blur(5px);
}
.box .password-strength:nth-child(4) {
  filter: blur(10px);
}

script.js代码

[xcxyzm]wicg[/xcxyzm]

[sv]

const passwordInput = document.querySelector('.passwordInput')
const passwordStrengths = document.querySelectorAll('.password-strength')
const text = document.getElementById('text')

passwordInput.addEventListener('input', function(event) {

    const password = event.target.value
    const strength = Math.min(password.length, 12)
    const degree = strength * 30 // calulate degree value based on password strength

    const gradientColor = strength <= 4 ? '#ff2c1c' : (strength <= 8 ? '#ff9800' : '#12ff12')
    const  strengthText = strength <= 4 ? '弱' : (strength <= 8 ? '中等' : '强')
    passwordStrengths.forEach(bar => {
      bar.style.background = `conic-gradient(${gradientColor} ${degree}deg, #1115 ${degree}deg)`
    })
    text.textContent = strengthText
    text.style.color = gradientColor
})

[/sv]