小米官网项目制作——javascript知识分享下
目录
前言
一、观察页面内容
二、切换界面
三、登录表单界面
1.选中的效果
2.错误提示
3.不选中的效果
4.密码框
四、注册界面
五、链接跳转
总结
前言
之前我分享了关于小米官网主页的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的方法来去书写。剩下的就是观察代码中的规律，经可能的简洁化内容，以外这样有利于网页的加载，感谢大家的收看。
小米官网项目制作——javascript知识分享下相关推荐
- 小米官网项目制作——javascript知识分享上
目录 前言 一.整体架构 二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节 三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子 四.轮播图 1.本体的部件 ...
- 仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载 点这里前往下载 小米官网项目具体操作 1.gulp的搭建 一 , 打开node控制台 命令行输入 cd 加文件夹路径 进入当前文件夹 命令行输入 cnpm ...
- 项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
- 用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- Web项目实战分享——小米官网
Web项目实战分享--小米官网 大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
- 项目三《小米官网仿写》
文章目录 前言 一.下载APP 二.下拉菜单 三. 小米侧边栏 四.登录注册界面 五.lation实现界面切换 总结 前言 本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...
- 电商项目：仿小米官网纯HTML+css布局
前言 时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
- HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
- 项目一：《小米官网》
一.项目介绍 "小米旗舰商城".二十一世纪是网络休闲生活的时代,在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式.如今信息网络的发展可以说是一日千里,透过网络的运用,可 ...
最新文章
- 《2019人工智能发展报告》出炉：清华大学-中国工程院知识智能联合研究中心、中国人工智能学会联名发布！...
- Effective C++ -----条款06:若不想使用编译器自动生成的函数，就该明确拒绝
- html文件用safari打开方式,如何使用openURL()读取在safari中打开的html文件 - c#代码 - 源码查...
- 【Python】蒙特卡罗方法计算圆周率及给定随机数种子
- java多线程问题 Runnable和Callable有什么不同？
- 通过 Serverless 加速 Blazor WebAssembly
- Holedox Moving
- Linux驱动下的platform总线架构(转)
- FreeRTOS源码分析与应用开发10：内存管理
- 几个有用的小程序（转载）
- 【codevs3119】高精度开根号（二分答案）
- 情感分析︱网络公开的免费文本语料训练数据集汇总
- vue+高德地图 点击地图获取经纬度和详细地址
- stdafx.h简介
- 【软技能】完全写作指南--演讲
- 计算广告学 学习资料
- cdr多页面排版_CDR排版须掌握三大功能 值得收藏
- linux系统github全局加速
- Redux中的reducer到底是什么，以及它为什么叫reducer？
- 80篇数据库大数据精华内容