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>