FromWave

最新推荐文章于 2024-09-11 22:31:16 发布

moonchildink

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量111

点赞数

分类专栏： 50Projects 前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_63254971/article/details/126717930

版权

50Projects 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

FromWave

分析

querySelectorAll()方法和getElementsByClassName()之间的区别:

在获取label时,如果使用getElementsByClassName()会返回两个字符串组成的字符串数组,而querySelectorAll方法则会返回对象组成的对象数组.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pc7hNApR-1662427066399)(C:\Users\moonchild\AppData\Roaming\Typora\typora-user-images\image-20220906080236738.png)]

labels.forEach(label=>{
    label.innerHTML = label.innerText.split('').
        map((letter,idx) => `<span style = 'transition-delay:${idx * 50}ms'>${letter}</span>`).join('');
});
//split()在传进的字符串为空的情况下会将字符串分割成单个字母
//idx*50 实现波浪效果
// map()函数 The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. 简单来说,就是对数组的每一项执行回调函数
//$的使用目前还没有找到一个很好的解释

输出框上侧label提示文字的处理:

由于label是放在input之后的,所以在未作修改的情况下,他会默认显示在输入框下侧.解决办法是将input设置为relative相对定位,而将label设置为绝对定位,这样label提示文字就可以以输入框为基准进行调整. 将全局设置为border-box以后文字会显示在输入框的后边,而boxsizing默认的情况下会显示在输入框的下边,这是为什么???

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormWave</title>
</head>
<style>
    *{
        margin: 0;
        /*box-sizing: border-box;*/
    }
    body {
        background:steelblue;
        display: flex;
        justify-content: center;
        /*align-content: center;*/
        align-items: center;
        height:100vh;
    }
    .container {
        background: rgba(0,0,0,0.3);
        padding:15px;
        border-radius: 5px;
        color: white;
        font-family: "JetBrains Mono";
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .container h2{
        margin-top: 30px;
        margin-bottom: 40px;
        text-align: center;
        font-size: 30px;
    }
    .input {
        position: relative;
        margin:20px;
    }
    .input input {
        background: transparent;
        border: none;
        border-bottom: 2px white solid;
        width:100%;
        color: white;
        padding:10px;
        font-size: 14px;
    }
    .input input:hover,
    .input input:valid,
    .input input:focus{
        border-bottom-color: steelblue;
        outline: none;
        /*选中上方文字修改颜色*/
    }
    .input label {
        position: absolute;
        top:10px;
    }
    .input label span {
        display: inline-block;
        font-size: 18px;
        min-width: 5px;
        /*三次贝塞尔曲线,还需要学习*/
        transition:300ms cubic-bezier(0.68,-0.55,0.265,1.55);
    }
    .input input:focus+label span,
    .input input:valid+label span{
        color: lightskyblue;
        transform:translateY(-30px);
    }
    /*处理文字部分*/
    .button-container{
        display: flex;
        justify-content: center;
    }
    .button {
        border:none;
        outline: none;
        background: lightskyblue;
        text-align: center;
        padding:10px;
        width:90%;
        margin-bottom: 40px;
        margin-top: 30px;
        border-radius: 5px;
        color: black;
        font-family: "JetBrains Mono";
        font-size: 15px;
        user-select: none;
    }
    .button:hover{
        cursor: pointer;
    }
    .button:active {
        transform:scale(0.98);
    }
    a {
        color: lightskyblue;
        text-decoration: none;
    }
</style>
<body>
<article>
    <div class="container">
        <div>
            <h2>Please Login</h2>
        </div>
        <div class="input">
            <input id = 'email' type="text" required>
            <label for="email" class = "label">Email</label>
        </div>
        <div class="input">
            <input id = "password" type="password" required>
            <label for="password" class = 'label'>Password</label>
        </div>
        <div class = 'button-container'><button id = 'btn' class="button">Login</button></div>
        <div class="bottom-line">
            Don't have an account?
            <a href="#">Register</a>
        </div>
    </div>
</article>
<script>

    // The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
    const labels = document.querySelectorAll('.input label');
    console.log(typeof labels[0]);
    console.log(labels[0]);
    labels.forEach(label=>{
        label.innerHTML = label.innerText.split('').
            map((letter,idx) => `<span style = 'transition-delay:${idx * 50}ms'>${letter}</span>`).join('');
    });

    const btn = document.getElementById('btn');
    btn.addEventListener('click',()=>{

    })

</script>
</body>
</html>