目录
前言
之前我分享了关于小米官网主页的javascript内容的制作，不知道大家通过上一篇博客有没有获得需要的知识。这一次我们接着上一次没讲完的登录，注册界面的内容继续讲解。这一块的内容更多是自己去想的，不一定要参照我的想法，但是可以使用我的思路去制作网页，相信也会给你很多的帮助，有什么不对的地方也还请指出我的错误的地方。
一、观察页面内容
首先我们需要跳转到小米官网的登录注册页面来看看它的内容：登录界面。我们可以看到这样的内容：
当我们点击注册的时候，会发生切换界面的效果。
我们需要从这里注意这么几个地方的代码：
1.登录下面的条，会根据点击对象改变位置
2.登录界面的面板
3.注册界面的面板
4.条件达成之后会亮起来的按钮
他们需要怎么去制作效果，让我们来看看把。
二、切换界面
我们来看看这个切换页面的具体效果是怎么实现的：
我们可以看到这个效果实际上，和我们之前学过的轮播图是一致的。所以我们可以根据轮播图的效果来推测他需要什么样的方式和函数实现效果。 当我们点击注册的时候，会切换成注册的盒子，并且内部也切换成对应的形式。这样做需要准备两个基本一致的盒子平移的插入进去。不过因为我当时制作效果的时候，没有用浮动把两个盒子放在一起，所以只做成了简单的显示效果。
让我们来看看javascript的代码实现：
// 移动滑块
item[1].addEventListener('click', function() {
reg1.classList.add('offreg');
reg2.classList.remove('offreg');
a1.classList.add('change');
a2.classList.remove('change');
animate(select, itemW);
});
item[0].addEventListener('click', function() {
reg1.classList.remove('offreg');
reg2.classList.add('offreg');
a1.classList.remove('change');
a2.classList.add('change');
animate(select, 0);
});我这里写入了一个animate的缓慢动画的内容，我们可以用他实现移动滑块的效果。我通过更改高度的属性方式写入了这个类名变化，实现了出现和消失的效果。这里需要的是a1和a2两个属性。因为实际上这两个按钮对应的表单是不一样的，那么他们传达的其实是一个链接地址。所以包裹文字的是a链接标签，我们需要选中a标签给他单独做颜色变化。
实际的效果如下：
三、登录表单界面
登录的表单界面我们可以很清晰的看出来这么几个效果：选中，错误提示，不选中。
让我们分开看看这几个效果该怎么去处理：
1.选中的效果
当我们选中的时候，出现这么几种效果：背景改变，提示文字移动而且变小，边框变成了橙色而且有阴影效果。这是我们需要做的属性，这个过程仍然还是通过我们学习的classlist的方法，通过CSS的样式添加完成这个过程，只是这个文字出现的时候，有一个时间上的变化，所以我们需要给他加transition的动画时间，实现这个中间变化的过程。
.Bchange {
/* 边框变化 */
box-shadow: 0 0 0 2px rgba(255, 92, 0, 0.2) !important;
border-color: #ff5c00 !important;
}
.trueC {
/* 正确信息背景色 */
background-color: #fff !important;
}
.above {
/* 文字移动 */
top: 6px!important;
font-size: 12px!important;
}我们可以看到，这些属性都是被写上important的强制属性的，这样写的原因是为了防止CSS代码中存在的层叠性的性质，因为代码是从上到下执行的，下面代码的执行会覆盖上面的代码。
2.错误提示
我们可以看到，当内容被输入的时候，是正常的判定，但是当输入框内什么内容都没有的话，就会更改文字颜色为红色，背景颜色更改，而且还有错误的提示信息，文字也会回到原来的位置。为了做出效果，说明我们每次都需要去判断按键的信息。当我们的信息为空的时候，就去生成报错的信息；当我们信息不为空的时候，我们就显示我们需要的样式组合。
我们先来看看，如何生成错误信息：
function Error(parent, content) {
var div = document.createElement('div');
div.classList.add('error')
div.innerHTML = content;
parent.appendChild(div, parent.children);
};我通过函数的信息，把生成错误提示的代码包装起来，在我需要用的时候带入进去。之后带入我自己需要的数值和对象，我就可以插入这些信息。
接下来我们来看看我们的实际在选中状态下的代码吧：
ichange.addEventListener('focus', function() {
tchange.classList.add('above');
bchange0.classList.add('Bchange');
bchange0.classList.add('trueC');
ichange.addEventListener('keyup', function() {
if (this.value == '') {
tchange.classList.add('C_change');
bchange0.classList.remove('trueC');
bchange0.classList.add('flaseC');
flag0 = 0;
// 错误提示
if (num == 0) {
Error(user, '请输入账号');
num = 1;
}
} else {
ichange.innerHTML = this.value;
tchange.classList.remove('C_change');
bchange0.classList.add('trueC');
bchange0.classList.remove('flaseC');
flag0 = 1;
// 错误提示
if (num == 1) {
var div = user.querySelector('.error');
user.removeChild(div);
num = 0;
}
}
});
});在这里我们看到，我在错误提示的地方还写了一个num的数值来判断是否执行，为什么不把代码放在一起执行呢？因为当我们按下按钮的时候，这个判断会不停的进行反应。但是每次我删除信息之后，错误的提示就已经被我用removechild的方式删除了，那么浏览器将会无法找到他需要删除的对象，那么这个代码就会报错，这显然不是我需要的结果。而且每次按键都会不挺的触发事件，导致插入出一大堆新的错误提示，从而无法删除我需要的错误提示。因此我用到了一个我们上次学习的动：节流阀。让内部信息没有的时候，num = 0 ，所以我知道这个value值是不存在的，为空，那么我就可以插入信息，这个时候改变num = 1，这个操作因为num变成了1，只会被执行一次；而当num == 1的时候，内部是已经被插入信息的，也就是value不等于空，所以删除信息的操作就被被执行，而这个时候num重新变成0。这样的操作，避免了判断错误提示的信息重复使用的问题。
3.不选中的效果
我们在仔细看看不选中的效果，我们可以看到，不选中的时候，如果不为空了，那么文字信息就固定在上面，而且错误颜色将会消失。如果为空了，就会保持错误的样式，文字放下来。这里的效果，根据我们写错误判断的代码来更换一下内容，调整一下就能做出来。我们来看看代码：
Ichange.addEventListener('blur', function() {
Tchange.classList.remove('above');
phone.classList.remove('Bchange');
phone.classList.remove('trueC');
if (this.value == '') {
Tchange.classList.add('C_change');
label.classList.add('C_change');
phone.classList.remove('trueC');
phone.classList.add('flaseC');
// 错误提示
if (num == 0) {
Error(phone0, '请输入账号');
num = 1;
}
} else {
Tchange.classList.remove('C_change');
label.classList.remove('C_change');
Tchange.classList.add('above');
phone.classList.remove('trueC');
phone.classList.remove('flaseC');
// 错误提示
if (num == 1) {
var div = phone0.querySelector('.error');
phone0.removeChild(div);
num = 0;
}
}
});我们可以看到，实际上没有太大区别，需要的只是更换一下那些东西是失去焦点的时候的效果。接下来的密码框也是用一样的方式去制作就可以了。
4.密码框
密码框还有一个效果：
当我们点击眼睛的时候有一个显示密码，而且眼睛更换样式的效果。这个效果其实很简单，在不需要判断密码样式的错误情况下，这个样式只需要我们点击眼睛的时候，跟换它的图片，同时改变密码框的type为文本就能显示密码了。我们看看代码演示吧：
// 显示和隐藏密码
var eyes = pwd.querySelector('.mi-input-adornment');
var eye = eyes.querySelectorAll('svg');
var flag = 0;
eyes.addEventListener('click', function() {
if (flag == 0) {
ichange1.type = 'text';
eye[0].classList.add('off');
eye[1].classList.remove('off');
flag++;
} else {
ichange1.type = 'password';
eye[0].classList.remove('off');
eye[1].classList.add('off');
flag--;
}
});这里通过flag实现一个开关的作用，实际上也是节流阀的一种。
四、注册界面
其实注册界面和我们的登录界面基本效果一致，这里再说一下里面的细节，大家多多注意就好。我们先来看看效果：
我们可以看到这里，手机号码的输入框，它的国家码也会跟着变色，这里是需要注意一下的地方。注意改变颜色的时候，这个对象要一起被选中。
除此之外，我们可以看到当两个框的内容被填入了内容之后，下面的注册按钮才凸现出来。这个效果可以做成达成条件的时候才能被选中，可以使用disabled的这个属性，让button这个属性无法被选中就可以了。不过我没有写，这里提一句，大家可以自己去尝试做。我们来看看他的代码：
var btn = document.querySelector('.now');
document.addEventListener('keyup', function() {
if (flag0 + flag1 == 2) {
btn.classList.add('nowC');
} else {
btn.classList.remove('nowC');
}
});大家可以看到我们的代码下面都有一个flag的数值变化，只有内容不为空的时候，flag0和flag1才会变成数值1，才能实现1 + 1 = 2的效果，大家也可以用其他自己的方法来做，比如两个数值为true的时候，与的结果为true才能执行的方式等等等等。
最后我把这个表单的代码展示给大家，大家可以自己做改动，写出自己的风格的代码：
//手机号
var phone = document.querySelector('.phone');
var phone0 = document.querySelector('.phone0');
var label = phone.querySelector('.mi-floating-label');
var phone1 = document.querySelector('.phone1');
var tel = phone.querySelector('.tel');
var Ichange = tel.querySelector('.I_change');
var Tchange = tel.querySelector('.T_change');
Ichange.addEventListener('focus', function() {
Tchange.classList.add('above');
phone.classList.add('Bchange');
phone.classList.add('trueC');
Ichange.addEventListener('keyup', function() {
if (this.value == '') {
Tchange.classList.add('C_change');
label.classList.add('C_change');
phone.classList.remove('trueC');
phone.classList.add('flaseC');
flag0 = 0;
// 错误提示
if (num == 0) {
Error(phone0, '请输入手机号码');
num = 1;
}
} else {
Ichange.innerHTML = this.value;
Tchange.classList.remove('C_change');
label.classList.remove('C_change');
phone.classList.add('trueC');
phone.classList.remove('flaseC');
flag0 = 1;
// 错误提示
if (num == 1) {
var div = phone0.querySelector('.error');
phone0.removeChild(div);
num = 0;
}
}
});
});
Ichange.addEventListener('blur', function() {
Tchange.classList.remove('above');
phone.classList.remove('Bchange');
phone.classList.remove('trueC');
if (this.value == '') {
Tchange.classList.add('C_change');
label.classList.add('C_change');
phone.classList.remove('trueC');
phone.classList.add('flaseC');
// 错误提示
if (num == 0) {
Error(phone0, '请输入账号');
num = 1;
}
} else {
Tchange.classList.remove('C_change');
label.classList.remove('C_change');
Tchange.classList.add('above');
phone.classList.remove('trueC');
phone.classList.remove('flaseC');
// 错误提示
if (num == 1) {
var div = phone0.querySelector('.error');
phone0.removeChild(div);
num = 0;
}
}
});我们可以看到代码基本是一致的，只需要注意其他数值上的变化就可以了，比如之前提到的另外一个标签也要被选择的情况。
五、链接跳转
当我们点击登录的链接页面的时候，打开的是登录界面，点击注册的链接页面的时候，打开的是注册界面。这个要怎么做呢？我们需要用到location的方法来制作。这里我附上代码来解释一下：
// 链接跳转
var login = document.querySelector(".login");
var register = document.querySelector(".login0");
console.log(login, register);
login.addEventListener("click", function() {
window.location.href = 'login.html' + '?' + 1;
});
register.addEventListener("click", function() {
window.location.href = 'login.html' + '?' + 2;
})首先我们要获取到我们的a标签，给他的href添加javascript:;来实现阻止a便签跳转的能力，之后我们来手动启动这两个链接跳转，我们让他均会跳转到login.html页面上，但是加上两个我们自己添加的参数。
var temp = window.location.search.substr(1);
function Temp() {
if (temp === '1') {
item[0].click();
}
if (temp === '2') {
reg1.classList.add('offreg');
reg2.classList.remove('offreg');
a1.classList.add('change');
a2.classList.remove('change');
select.style.left = "68px";
}
}之后我们来判断：当我们点击的是登录的时候，就不做反应或者点击登录的按钮。如果是注册按钮，则改变为注册的界面。 这样就完成了这个操作。
这里需要注意的是，需要用location.search获取的是等号后面的所有内容，可以先log看看search都获取到了什么，然后找到我们要获取的位置去判断。
总结
最后废话几句，js代码在从其他文件传入网页的时候，要注意代码需要使用window.onload或者其他的形式去导入html中。这是因为html执行是从上到下的，理论上js代码写到下面才对，但是这样会非常麻烦，因为通常我们的html代码都非常长，所以可以使用onload或着DOMContentLoaded的方法来去书写。剩下的就是观察代码中的规律，经可能的简洁化内容，以外这样有利于网页的加载，感谢大家的收看。
扫一扫
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
