50 天学习 50 个项目 - HTMLCSS and JavaScript

day39-Password Strength Background（密码强度背景）

效果

在这里插入图片描述

index.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Strength Backround</title>
    <!-- 类似bootstrap的库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
        integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 背景 密码强度越高，背景越清晰 -->
    <div class="background" id="background"></div>
    <!-- 输入表单 -->
    <div class="bg-white rounded p-10 text-center shadow-md">
        <h1 class="text-3xl">图片密码强度</h1>
        <p class="text-sm text-gray-700">改变密码看看效果如何</p>
        <!-- 邮箱 -->
        <div class="my-4 text-left">
            <label for="email" class="text-gray-900">邮箱:</label>
            <input type="text" class="border block w-full p-2 mt-2 rounded" id="email" placeholder="Enter Email" />
        </div>
        <!-- 密码 -->
        <div class="my-4 text-left">
            <label for="email" class="text-gray-900">密码:</label>
            <input type="password" class="border block w-full p-2 mt-2 rounded" id="password"
                placeholder="Enter Password" />
        </div>
        <!-- 提交按钮 -->
        <button class="bg-black text-white py-2 mt-4 inline-block w-full rounded" type="submit">
            提交
        </button>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

* {
    box-sizing: border-box;
}

body {
    /* 子元素竖直居中排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 背景 */
.background {
    background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b') no-repeat center center/cover;
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    z-index: -1;
    /* 模糊度 */
    filter: blur(20px);
}

script.js


// 重点 flex position filter: blur(20px); event
// 1.获取元素节点
const password = document.getElementById('password')//密码
const background = document.getElementById('background')//背景
// 2.绑定事件 input事件类型
password.addEventListener('input', (e) => {
    // console.log(this);//window 由于使用了箭头函数
    // console.log(e.target);//password元素对象
    const length = e.target.value.length//由于有垃圾回收机制，可使用const定义
    // 垃圾回收机制：当函数执行完毕后，函数原有的变量会被清除，即不存在const所定义的基本数据类型变量被重新赋值，导致报错
    // 背景图片的模糊度
    const blurValue = 20 - length * 2
    background.style.filter = `blur(${blurValue}px)`
})