班级：青鸟互联网教育-前端二班

项目名称：QQ登录

指导老师：青鸟互联网教育-崔姣老师

一、 项目制作背景及软件环境

  大家好我叫罗炎，来自青鸟互联网教育前端二班的一名学员，下面让我来为大家介绍我制作的项目（QQ登录界面）

 制作理念：用JS制作出QQ相似的效果，使自己的能力得到更大的提升，该项目差不多将自己所学过的知识点都运用到了，比例：图片轮播，二级联动.......，还让自己了解到了没有接触过的JQuery插件；

制作工具：Photoshop，Adobe Dreamweaver CS6

制作技术：CSS3，JavaScript，HTML，JQuery

环境：Win10，火狐浏览器（全屏模式）

二、 网站内容展示

下面就是我项目各个板块

             登录界面

    登录界面：该项目查看需全屏F11，双击QQ图标时，将本来隐藏的登录界面进行显示，右下角的时间为当前的动态时间，背景图片为截图桌面，为了达到更加逼真的效果。在最右下角我使用了一个动态的时间，根据当前的时间进行切换

           账户切换

    账户切换：账号切换，给两个账号设置一个鼠标滑入事件，当鼠标滑入第账号时，背景颜色进行变换，名字也进行显示，后面的删除也会显示，在账号文本框加入了一个JQuery判断，如果用户按下的是删除按钮，两个文本框清空，头像换成QQ企鹅。

         状态选择

   状态选择：点击绿色的圆点时，将隐藏的状态进行显示，点里面的内容时，绿圆点将会变换为你选择的状态图片，主要讲每个动态的div设置一个点击事件，点击过后使用innerHTML将绿圆点DIV内的图片进行切换

    键盘：使用div与span的布局，让键盘达到更加整齐的效果，在最外层的div内取一个id的名字，再使用js找到声明的id名字内的span，使用for循环将每个span注册一个单击事件，当用户点击键盘是密码框增加单击的内容，点击大小写切换，最底下。但是需要在用户单机是给一个if判断，如果用户点击的删除符号，密码文本框中的内容会删除一个使用for循环将下标逐渐删除，其实只是将下标隐藏并没有进行显示，点击切换大小写时，将最低下两排的字母转换为大小字母，点击一个切换大小写，一个全局变量自增，在拿变量进行取余数，判断用户是第几次点击，如果为单数，则是切换大写，如果为双数则是切换小写。

         二维码登录      

  二维码登录：当页面加载完成时，正在加载消失，另外一段文字进行显示，当鼠标滑入二维码时，二维码相左滑动50个像素，使用了一个css的样式，让二维码在1.5秒才滑到指定位置，在将手机进行显示，当用户单机返回时，该页面进行切换到首页

        登录界面设置

  设置：当用户点击登录界面的设置时，首页进行选择180度，在3秒过后将隐藏的设置页面进行显示。

     在类型的下拉列表中使用了一个二级联动，当下拉列表发生改变时，第二个下拉列表随之改变，用户点击确定是该页面逆向旋转180度然后隐藏，首页面显示。

二级联动：首先定义好两个数组，一个一维数组，一个二维数组，二维数组下标的值对应一维数组的下标，在使用创建createElement与和添加appendChild，将数组内的内容进行创建，在像对应的子节点进行添加，当一个下拉列表的值发生改变时，第二个下拉列表的值也进行改变。

        登录界面删除账号

 删除账号：当用户滑入登录界面的账户切换时，点击删除div层发生改变，首页进行隐藏，删除页面进行显示，如果用户点击了一个单选按钮在点击确定，则用户选中的账号进行移除，如若点击第二个单选按钮，账号并不会删除

三、项目总结：

    感受：经过这个项目让我更加巩固了所学的知识，并且也让自己的能力得到了更大的提升，也让自己学习到了以前没有接触过的知识，能够使用循环时尽量使用循环。

     缺点：在制作项目时，也看到了自己有些地方的不足，命名不规范，代码比较乱，出现bug时，很难找到这个bug所写的代码，所以每次只能一条一条的去找，拖延了项目进度，在命名时大部分名字差不多相同的开头，所以Ctrl+f根本找不到指定的代码

    改正：一定要给每个函数标记号注释，指定这个函数的功能，并且命名一定要规范。

学院地址：雁峰区东风村衡山科学城B2栋

鸿运校区：解放路鸿运数码广场3楼 

江东校区：珠晖区东风南路玄碧塘

集团地址：衡阳市雁峰区东风村衡山科学城B2栋
咨询电话：0734-8131831、18975451063、18974759366
QQ在线咨询：1565579702、1300843464、1104618048

长按，识别二维码，加入我们