<meter>标签实现 密码强度效果

灵感方法来源:https://www.zhangxinxu.com/wordpress/2021/11/html-meter-password/

meter标签 + zxcvbn算法

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>

<body>

 <input type="password" oninput="checkPassword()">

  
  
  密码强度:<meter min="0" max="12" low="4" high="8" optimum="10" />

body>
html>


<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js">script>
<script>
  let objResult = zxcvbn('your password');

  /**
   * objResult 包含下面这些属性
   *
   * @param {number} calc_time           - zxcvbn 计算此密码强度花费的时间,单位是毫秒 ms
   * @param {object} crack_times_display - (不同运算力下的破解时间,字符描述展示)
   * @param {object} crack_times_seconds - (不同运算力下的破解时间,数值展示)
   * @param {object} feedback            - 反馈与建议
   * @param {number} guesses             - 估计破解密码所需时间
   * @param {number} guesses_log10       - guesses lg10的运算结果
   * @param {string} password            - 你输入的密码
   * @param {number} score               - 密码安全性得分 | 整数 0~4
   * @param {array} sequence             - 预测计算
   * */
  console.log(objResult);
script>
<script>
  function checkPassword() {
    const inputValue = document.querySelector('input').value;
    const intension = document.querySelector('meter');

    intension.value = zxcvbn(inputValue).guesses_log10;
  }
script>

在这里插入图片描述

加点小细节

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    /* 确定强度条的宽高,用于平均分块 */
    ::-webkit-meter-bar {
      width: 120px;
      height: 12px;
      border: 0;

        /* 用遮罩添加间隔 */
      /*-webkit-mask: linear-gradient(to right, red 39px, transparent 0 41px, orange 0 79px, transparent 0 81px, green 0);*/
    }
    /* value 处于 [min, low]时 */
    ::-webkit-meter-even-less-good-value {
      background: red;
    }
    /* value 处于 [low, optimum]时 */
    ::-webkit-meter-suboptimum-value {
      /*background: linear-gradient(to right, red 40px, orange 0);*/
      background: linear-gradient(to right, red 40px, orange 0);
    }
    /* value 处于 [optimum, max]时 */
    ::-webkit-meter-optimum-value {
      background: linear-gradient(to right, red 40px, orange 0 80px, green 0);
    }

    /* 用伪元素添加间隔 */
    meter::before {
        content: '';
        display: block;
        width: 40px;
        height: 12px;
        box-sizing: border-box;
        border-width: 0 2px 0 2px;
        border-color: #fff;
        border-style: solid;
        position: relative;
        left: 39px;
        top: 13px;
        z-index: 2;
        margin-top: -12px;
    }

    /* 用伪元素添加文字说明 */
    meter::after {
        content: '强 中 弱 aaaaaaaaaaaaaaaaaa';
        display: inline-block;
        width: 120px;
        line-height: 20px;
        height: 20px;
        overflow: hidden;
        text-align: justify;
        box-sizing: border-box;
        padding: 0 15px;
        position: absolute; /* 脱离文本流,不挤占位置 */

        font-weight: bold;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(to right, red 40px, orange 0 80px, green 0);
        -webkit-background-clip: text;
    }
  style>
head>

<body>

 <input type="password" oninput="checkPassword()">

  
  
  密码强度:<meter min="0" max="12" low="4" high="8" optimum="10" />
body>
html>


<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js">script>
<script>
  let objResult = zxcvbn('your password');

  /**
   * objResult 包含下面这些属性
   *
   * @param {number} calc_time           - zxcvbn 计算此密码强度花费的时间,单位是毫秒 ms
   * @param {object} crack_times_display - (不同运算力下的破解时间,字符描述展示)
   * @param {object} crack_times_seconds - (不同运算力下的破解时间,数值展示)
   * @param {object} feedback            - 反馈与建议
   * @param {number} guesses             - 估计破解密码所需时间
   * @param {number} guesses_log10       - guesses lg10的运算结果
   * @param {string} password            - 你输入的密码
   * @param {number} score               - 密码安全性得分 | 整数 0~4
   * @param {array} sequence             - 预测计算
   * */
  console.log(objResult);
script>
<script>
  function checkPassword() {
    const inputValue = document.querySelector('input').value;
    const intension = document.querySelector('meter');

    intension.value = zxcvbn(inputValue).guesses_log10;
  }
script>

在这里插入图片描述

你可能感兴趣的:(Html5,CSS,前端,html5,css)