前言 --- 期末周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;"></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的内容
:学习更多算法知识,不能再将自己的能力只保持在简单水平