博客计划 启动！

前言 --- 期末周over

终于熬过了期末周的艰难痛苦，转眼间已经将近一个月的时间没有敲代码了。一日不见，如隔三秋，在从期末周到现在的学习这段时间里，我学习了有关nodeJs和axios的知识，说的是学习了但实际上用的还是不太熟练，看来我需要努力的地方还有很多。

今天分享的是一些有关input框的动画

input框动画

登录注册的input框动画

scss

                label {
                position: relative;
                #userPassword{
                    outline: none;
                    width: 80%;
                    height: 30px;
                    font-size: 20px;

                }

                span {
                    transition-duration: 0.5s;
                    font-size: 18px;
                    color: #5a5959;
                    font-weight: 600;
                    position: absolute;
                    left: 2px;
                    top: 3px;
                    padding: 4px 8px;

                }

                .focusSpan {
                    font-size: 15px;
                    font-weight: 400;
                    top: -15px;
                    left: 15px;
                    background-color: #FFF;
                    position: absolute;
                    color: #5a5959;
                    padding: 4px 8px;
                }

                i {
                    position: absolute;
                    right: 21%;
                    top: 10px;
                }
            }
             //关键代码

            label:focus-within span {
                font-size: 15px;
                font-weight: 400;
                top: -20px;
                left: 15px;
                background-color: #FFF;
            }
               
                }

JS

​HTML部分
 <label for="userPassword">
          <!-- 设置密码 -->
          <input type="password" id="userPassword" autocomplete="off" onblur="getJudge(this)" maxlength="16"
            minlength="8">
          <span id="spanPassword">Password</span>
          <i class="iconfont eyesEnroll" style="cursor: pointer;">&#xe642;</i>
          <p style="font-size: 12px;">密码必须包含英文字符和数字(8~16字符)</p>
        </label>


JS部分
let judgmentPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
//当input框失去焦点时，发生该事件
function getJudge(a) {
    // 获取input对应的span标签
    let span = a.nextElementSibling;
    let advice = a.parentNode.lastElementChild;
    let password = a.value;
//判断input框中值是否符合正则
    if (password.length > 0) {
//将input框的样式定义下来
        span.classList.add('focusSpan')
        if (!judgmentPassword.test(password)) {
            advice.classList.remove('rightColor');
            advice.classList.remove('normalColor');
            advice.classList.add('warningColor')
            advice.innerHTML = '密码必须包含英文字符和数字(8~16字符)';
        } else {
            advice.innerHTML = '密码格式正确';
            advice.classList.remove('warningColor');
            advice.classList.remove('normalColor');
            advice.classList.add('rightColor');
        }
    } else if (a.value.length == 0) {
        span.className = ''
        advice.innerHTML = '密码必须包含英文字符和数字(8~16字符)';
        advice.classList.add('normalColor')
        advice.classList.remove('warningColor');
        advice.classList.remove('rightColor');
    }
}

效果图如下

 

简单的搜索框样式

HTML代码
 <div class="search">
                    <input type="text" id="courseSearch" oninput="searchCourse(this)">
                    <i class="iconfont sousuo-tianchong"></i>
                </div>
JS代码
//当输入框中有信息时，不返回
function searchCourse(event) {
    let value = event.value;
    if (value.trim().length > 0) {
        event.classList.add('inputFocus');
    } else {
        event.classList.remove('inputFocus');
    }
}

SCSS

   .search {
            position: relative;
            display: inline-block;
            background-color: #CCC;
            top: 15px;
            width: 225px;
            height: 40px;
            border: 1.5px #CCC solid;
            border-radius: 5px;
            z-index: 0;
            overflow: hidden;

            input {
                position: absolute;
                top: 0;
                outline: none;
                text-indent: 5px;
                width: 225px;
                height: 40px;
                font-size: 20px;
                background-color: transparent;
                border: 1.5px #CCC solid;
                border-radius: 5px;
                transition-duration: .5s;
                z-index: 15;
            }

            .iconfont {
                position: absolute;
                left: 10px;
                bottom: -30px;
                font-size: 20px;
                z-index: 1;
                transition-duration: .5s;
            }
        }

        input:focus+.iconfont {
            font-size: 400px;
            left: -150px;
        }

效果如下

 

 总的来说，关于input框的内容和样式还有很多，这是我最近在写项目时找到的一些好看的样式，但对于前端来说样式都是最基本的内容，更何况我们有时候连最基本的都很难保障去实现，所以在接下来的‘假期’生活中，要好好的提升自己在编程和JS高级以及ES6的知识储备，让自己能够成为一名合格的前端程序开发员。

下周的安排

：完成自己负责的前端模块项目，复习ES6和高级JS的内容

：学习更多算法知识，不能再将自己的能力只保持在简单水平