＜Web应用基础＞课程结业报告

一、网页概述

本网页的主题为《机动战士高达》，共包括登录界面、个人信息、高达资料、高达总览、高达机体五个页面。

登录界面。

顾名思义，需要用户进行登录，但由于是静态网页，所以登录账号与密码只有一个，放在了登录框里。

          

个人信息

即本人的姓名、班级、学号和爱好等，并在此页面对网页做了整体页面介绍。当然，也可以在此页面退出登录和更换头像。

           

高达资料

展示了《机动战士高达》这系列动漫的基本信息（简介、作品介绍等）。各个信息采用轮播方式进行切换。

             

高达总览

展示了《机动战士高达》几部经典之作的信息介绍。信息通过针对一个轮播组件，实现了左右滚动切换图片的效果，并能点击图片查看该部高达详细信息介绍。

               

高达机体展示

展示了三部非常帅气的高达机体及其基本信息。利用bootstrap的Carousel组件，对图片和信息进行展示（主要是想试试bootstrap，平时更常用的element-plus）。

               

其他

在页面放入了三个报告的网址，并有一个火箭动画，这是我以前刷抖音时看见的一个用css和html做出来的动画，觉得有意思，就跟着教程打了一遍，一直保留着。

           

二、开发过程

1、登录界面

       登录界面的实现其实较为简单，主要就是把body设成弹性盒子，好让登录框的盒子在页面居中展示。然后在对输入框、按钮设置好看的样式即可。当然，再加一些过渡加一些转换，以及结合伪类选择器hover可以使页面更有感觉。（不是不想多讲，而是觉得真没必要，无非就是一些设置颜色、字体、位置、过渡或者设背景图片等等的代码，简单代码量还大。）

       

                                                  图1.1   登录框html

                   

                                                              图1.2 登录框CSS

此为部分代码，详细css代码可以前往https://github.com/BZeternal/BZeternal.github.io 进行观看

    登录界面还有一个背景动画，其实也非常简单。Html中就是一群的li，然后再在css中给它改变形状，设置动画。

                                        

                                                  图 1.3 背景动画html

                     

                                               图 1.4 背景动画css

     由于有十个li，这里我只展示了两个li的css代码，其实就是将10个li分别设置样式（有圆、正方形等等）,再分别设置了它们的轨道（通过left设置），以及它们进行动画的时间和延迟，达到一个错落的效果。

                          

                                               图1.5 背景动画动画实现

  可以看见，每个li都是从屏幕下方升到屏幕上方，并且在上升途中还会进行旋转。

至于登录界面的js部分，内容也不多

           

                                             图 1.6 登录界面js代码

Js代码主要功能就是进行账号密码的判定，如果账号密码都正确，将会把登录框中的标题内容改为“welcome”，并且在1.5秒后跳转到home页面。这里，我还向浏览器内存中传入了一个数字“1”，这是用来表示当前页面的，这个数字会在后面改变导航栏的的样式中用到。如果账号密码错误，就会出现提示信息“账号或密码错误”。

2、基础组件

    在进入home页面之前，先讲完所有页面都会存在的基础组件。

2.1 导航栏

Html:

            

                                 图 2.1.1 导航栏html代码

    导航栏的html代码依然如此简洁，通过<li>标签和<a>标签共同实现

Css:

                                    

                                           图 2.1.2 导航栏部分css代码  

     这里同样没有展示完所有css代码，但大体上就是通过弹性盒子进行布局，然后再给导航栏加个伪类选择器，让鼠标经过它时，会出现白色阴影，实现高亮的效果。

Js:

               

                                 图2.1.3 导航栏js代码

    每当刷新页面时，导航栏都会执行一遍refresh函数，它会先从浏览器内存中取出当前页面的id，从html代码中我们可以看见每个a标签都设置有id，当发生页面跳转时（即点击a标签）就会将这个id值传入浏览器内存中。页面跳转后，从浏览器内存中取出这个值，我们就可以通过这个值找到导航栏中对应的li，并为其设置一个下边框,用来为用户提示当前所在页面。

2.2 光点背景

Html：

            

                                        图 2.2.1 光点背景html

      可以看到光点背景的html其实就是一个画布，主要用js代码实现光电

Js：

                    图2.2.2 光点背景js

        可以看到js代码也是极其简单的，我们先对画布的高度和宽度进行了设置，为屏幕的宽度和高度，然后设置了400个光点，并且光点的出现位置是随机的，但在屏幕的宽度和高度以内，以及其速度也是一个随机数，这里为了防止速度太小，加了0.5的偏移量，这样会显得更高级。接下来就是无脑进行渲染了，常规操作，而光点的移动方式可以看见代码中做了一个三元运算，当光点的y坐标比0小时（即在屏幕上方，超出了屏幕），光点的高度就会变为height（即屏幕的最下方），当光点的坐标y比0大时（即光点的位置在屏幕中），则y坐标会以step的步幅减小，直至减小到小于0，又会回到屏幕底部，接着往屏幕上方移动，然后一直循环。

2.3 加载页面

Html：

                       图 2.3.1 加载页面html代码

        加载页面的html代码其实就是四个盒子。主要靠的是css动画实现功能。

CSS：

               图 2.3.2 加载动画CSS代码

这是对加载动画中的“加载中…”进行处理，可以看到每个字的大小为20px，动画是将盒子的宽度从60px 加到 90px，并且以10px的步幅进行扩宽，因此，这就可以展现出将“加载中”后面的三个点从无到有的效果。

 

               图 2.3.3 加载动画CSS代码

          加载动画其实就是将盒子变为圆形并给盒子的边框加上颜色，当然，只需要给两个或一个方向加上颜色就行，然后再将三个盒子排列好，再进行旋转即可。加载动画由三个盒子组成，这里只展示了一个盒子的CSS代码，其余两个代码与之类似，只不过改变了颜色，大小以及旋转方向。

  

                           图 2.3.4 加载动画JS代码

  该函数用于加载动画的隐藏。其中onreadystatechange 函数会在readState发生改变时触发，当我们跳转页面时，会发送请求，readState会发生改变，这时函数被触发，当readeState的状态为“complete”时，即请求已经完成，页面已经被解析并载入，就会执行定时器中的内容，加载动画的不透明度会以0.1的步幅减小，直至小于等于0时，完全隐藏加载动画，并删除定时器。

                                            

                                                      图2.3.5 加载动画

3、个人信息(home)页面

Html：

                  图 3.1 home页面HTML代码HTML

 该页面分为两部分，左侧可以修改头像和退出登录，右侧是个人信息以及页面介绍。无脑采用的是div + span，万物皆可div的方式进行了页面展示。

CSS:

                图 3.2 home页面CSS代码

  由于CSS代码过多，这里只象征性的展示部分CSS代码，全部CSS代码可以通过前面的网址进行查看。

该页面的CSS也无太多注意之处，就是一些调样式和位置等的代码，然后对于每个盒子，只要该盒子下有两个及以上的子标签，都将其设为弹性盒子，通过弹性盒子控制其子标签的布局。并且对于每个用于展示的盒子都通过伪类选择器hover设置了只要鼠标经过，盒子就会放大，并且出现白色阴影，达到高亮效果。而对于放个人信息的span也都通过伪类选择器hover设置了只要鼠标经过，字体颜色将会改变。

JS：

            图 3.3 home页面JS代码

Home页面的JS代码有三个函数，第一个函数是个定时器，会使字体在1s后变换字体颜色。第二个函数可以修改头像，点击修改头像按钮后，会变换图片，图片存在img文件夹下。第三个函数为退出登录，当点击退出登录按钮后，界面会重新返回到登陆界面。

4、高达资料（introduce）页面

HTML:

                图 4.1  高达资料页面HTML

由于代码太多，这里只象征性截下图，具体代码请前往网页观看。

该页面所有HTML代码跟上图代码类似，因为是一个信息展示的轮播图，每个信息的展示方式都一样，div下套div，一直套，套到想要的结果为止，标题用h标签展示，具体信息用p标签展示。至于翻页的箭头，我们可以从图中看到，是通过svg图标进行实现。

CSS:

                  图 4.2 高达资料页面CSS

  由于代码过长，上图只象征性展示了部分CSS代码，因为CSS代码与HTML代码实在太简单，只是一个页面展示，真不知道该讲啥，具体CSS代码请到前面所提网站中进行查看。

  该网页CSS内容大概就是先将一个大容器铺满全屏，并设置为弹性盒子，这样就可轻易将我们要展示信息的盒子居中展示。然后再在信息展示的盒子中，又设置弹性盒子，以达到左字右图的效果，再将左边显示文字内容的盒子也设置为弹性盒子，以来控制文字内容的布局。然后就是一些字体，盒子的样式和背景图片的设置。在这个css中，我还引入了谷歌的字体库，主要是这玩意儿省事还好看。

  值得一提的是，CSS中写的所有与信息展示有关的盒子初始状态为不可见。于是就有一个active可以用来展示某个信息，其作用与bootstrap的active类具有类似作用。

                图 4.3 active

JS:

            图 4.4 高达资料页面JS

该网页JS部分需要导入jQuery(别问，问就是方便，难得一个个用选择器去选择打一遍变量)，网页打开一来先进行初始化，给第一张展示的信息（即carousel-item-1）添加active，默认其为第一张展示。接下来分别与向前翻页和向后翻页的两个按钮绑定点击事件。点击后，当前页数发生改变，并执行setSlide函数，SetSlide函数会将展示内容改变为对应页数应该展示的内容（即加个active,当然也需要移除跳转之前展示信息的active，以免冲突）。在setSlide函数中，还做了边界处理，如果已经看到最后页信息，再点击下一页按钮，会自动跳到第一页（current与slide的值赋为0），如果已经在第一页，再点击上一页按钮，会自动跳到最后页（current与slide的值赋为最后一页所对应的值）。

5、高达总览（total）页面

HTML：

                        图 5.1 高达总览HTML

                              图 5.2 高达总览HTML

  该页面也是一个信息展示页面，所以每个展示信息的容器的结构与图5.1 类似，分别用两个div存放一张图片的左右两半边，再有一个div存放文字信息，标题h标签，内容p标签。图5.2 则是图片展示下方的页数显示，以及用li标签来表示翻页的按钮。

CSS:

          

                       图 5.3  高达总览CSS visible

                          图 5.4 高达总览CSS 图片

高达总览CSS代码无非也是对各种标签的样式进行设计，旋转位移，放大缩小，容器布局，一些用CSS就能做到的鼠标经过事件等等。但其中有两个值得注意的地方，一是图5.3 中的visible，它与前一个页面中active有着类似的作用，这个页面中用于点击图片后，给被隐藏的文字信息添加这个类名，以达到显示信息的目的。第二个值得注意的地方是图片的存放方式，初始第一张照片，左右两半正常存放在页面中，从第二张图片开始，左右两半的图片将分别存在屏幕的上方和下方，坐标分别为-100vh与100vh，并会一直递增下去，即第三张图片的左右两半分别在-200vh与200vh。如此存放，后续就可以很简单的通过改变上边距的值达到图片滚动的效果。

JS:

             

                                     图 5.5 高达总览JS 变量

        上图中scrolling为判断页面是否在滚动中，curPage为当前页数，pages为总页数（通过图片个数除以2得到），$left为左侧图片容器对象，$right为右侧图片容器对象。

         

                                  图 5.6 高达总览JS初始化触发函数

         该函数为初始所有的事件处理函数，其中它绑定了鼠标滑轮滚动事件和键盘事件，若滚动状态正常（scrolling为false）即可进行向上滑动或向下滑动调用相应的翻页函数进行翻页。翻页函数分别为Up和Down，分别对应向上和向下。

                                   

                                                   图 5.7 翻页函数

        navigateUp函数，用于向上翻页。若当前页curPage大于1，则向上翻页，页码减1、调用pagination函数更新页码标记并调用doMargins函数进行重新定位。navigateDown函数，用于向下翻页。若当前页curPage小于总页数pages，则向下翻页，页码加1、调用pagination函数更新页码标记并调用doMargins函数进行重新定位。

                    

                                                      图 5.8 pagination函数

        该函数如上述所说，就是用来翻页时进行改变图片下方页码和将底部圆点与当前页所对应。Active类的作用，不用我多说了吧，与上个页面作用相同。

                     

                                                          图 5.9 doMargins函数

         doMargins函数，用于设定图像容器的上边距的值，控制它们在上下滚动时的位置，以达到图片滚动的目的。函数中输入参数paramPage即为要跳转的页数，如果没有传入参数，则默认使用当前页curPage。当然，该函数首先将全局变量 scrolling 置为 true，以防止连续触发滚动事件，导致页面卡死。然后再取所有左右两半图片，遍历左半边图片，先取出左半边图片的data-helper值，并将其转化为10进制整数，与_page-1相加后，将这个值乘以100vh，再把值设给它们的上边距，其实这个过程就相当于对所有左半边图片进行了移动，移动方向取决于最后结果的符号。右半边图片也是类似的道理。至于为什么要这么做，可以参照刚刚我所特别提的CSS中每张图片的存放方式，而每张图片的data-helper值其实就是它们所在对应页数的值减去1，左半图片为负数，右半图片为正数。函数最后，设置定时器将scrolling的值赋为false，即1s之后才可以进行下一次翻页。

                 

                           图 5.10 图片滚动展示（此图为只翻一页的情况，且是从后往前翻）

           

                                             图 5.11 下方小圆点点击事件

        该函数为点击下方小圆点后，将会跳到相应页面。

                                            图 5.12 openContent

  openContent函数为打开页面中的文本内容，它是初始化触发函数中的第三个函数，触发条件为点击图片。当然执行过程就写的有点花哨了，首先会获取所点击的图像容器元素的data-blocks属性值，用以打开对应图片的内容。接着会给整个展示图片信息（包括文字，下方页数等）的容器加上active类（其实就是让这些文字隐藏），接着0.3秒后会给所点击的对应的图片加上active类（其实是展示完整的图片，不再是左右两半），并解除了滚动事件等的绑定，防止滚动。接着0.3秒后就会展示对应图片所对应的文字信息介绍。玩的就是层次感。

            

                                                       图5.13 内容关闭

         由于前面的铺垫，这个函数我就细介绍了，它的功能为在点击关闭按钮后，会移除进行文字信息展示这个容器的visible类，即文字 将最先隐藏，然后在0.8秒后，将弹窗（即这个容器）也隐藏掉，并会将图片的active类移除，并加上closing类（closing类其实就是定义了一个过渡效果，看起来显得更高级），图片重新变为两半，0.3s后本来的文字（页数等）也会重新显现，并初始化触发函数（重新绑定滚动等事件），最后移除图片的过渡效果。

6、高达机体(gundam)页面

该页面基于bootstrap进行实现

HTML:

            

                                            图 6.1 gundam页面代码

可以看到该页面使用了bootstrap的Carousel和Card两个组件，并对组件里内容进行了填充来展示高达机体信息。在最后还通过一个<img>标签展示背景。

CSS:

                           

                                                 图 6.2 gundam页面CSS

         由于使用bootstrap，故CSS代码并不多，只对背景图片进行了处理，使其占满全屏，并对图片进行了模糊处理。

JS:

            

                                                  图 6.3 gundam页面JS代码

         该页面JS代码中只有一个函数，函数功能为图片改变后，右边卡片中高达信息修改为图片中对应高达，并且背景图片也变为对应高达。

        该函数为boottrap提供的Carousel组件事件，每当图片发生变化时，函数将会执行。其中可以通过event.to获取到下一张图片对应的值。

        因此我们可以先将高达的信息和背景图片地址存入数组中，当图片改变触发函数后，根据event.to取到的值，在数值中找到对应高达信息和背景图片并替换卡片中信息和背景图片。

三、遇到的问题

1、导航栏不明外边距

        问题描述：在gundam页面中引入bootstrap包后，导航栏出现了不明外边距，本来我的导航栏中的内容通过flex以经居中显示，现在却被顶到最上边。

2、加载动画

        问题描述：对于如何实现在网页加载时，执行加载动画，并在网页加载完成后，加载动画消失

3、鼠标滚动事件

        问题描述：在total页面的JS代码中，绑定滚动事件，却只响应滑轮向下滚动的事件

4、如何存一个全局的变量

        问题描述：在通过导航栏切换页面时，我需要一个能记住跳转后页面ID的变量，以达到页面跳转后，我能将导航栏上所对应的页面跳转按钮加上下边框的目的，以向用户展示当前页面在哪。

四、问题解决

1、导航栏不明外边距

        对于这个问题，我到现在也不是太明白，前面4个页面没有导入bootstrap的包，都没有问题，都能正常展示，但在最后一个gundam页面中，导航栏左侧内容紧挨导航栏下沿，而导航栏右侧内容却紧贴导航栏上沿。于是我推测是不是类名啥的重复了，结果一查中文文档，发现bootstrap中确实有一个navbar组件，与我的导航栏类名重复，于是我将我的导航栏命名为mynavbar。确实，左侧内容得到了解决进行了居中展示，但右侧内容依旧紧挨上沿，我当时也并不知道是有外边距将他顶了上去，依旧认为是与bootstrap哪个类名重复了，结果我找遍中文文档和将我的导航栏里的标签的类名改了个遍都还是存在这个问题。后来，用过控制台发现了是有外边距将其顶了上去，于是将导航栏中左侧的容器设置为“margin：0”，问题才得以解决。但原因依旧不明。

2、加载动画

        对于这个功能的实现我原本的打算是点击跳转页面的函数后，先设置延迟，让加载动画转两圈再进行页面跳转，很明显这是掩耳盗铃。找了一遍网上，发现网上全是教加载页面怎么写的又酷又炫，可能我关键字没找好。最后还是在偶然与同学讨论动态网页时才知道可以用ajax的readyState查看XMLHttpRequest对象处于什么状态（毕竟平时就只是用用ajax来进行前后端的传值），可以利用readyState的值来判断打开一个新页面是否加载完成来实现加载动画的需求。

3、鼠标滚动事件

        在total页面的JS代码中，我绑定了一个滑轮滚动的事件，并用e.originalEvent.detail的值判断滑轮是向上移动还是向下移动，但无论滑轮是往上滑动还是往下滑动，它都只触发滑轮向下滑动时才会触发的函数。到网上去查，大家都用的这个，都没问题。好吧，我以为我前面写错了，结果检查两遍，一点一点输出到控制台，都没问题。后来换个关键字再查，发现一条博客说originalEvent.detail 是一个被废弃的属性，在旧版本的 Firefox 浏览器中曾被使用，于是我又换了个originalEvent.wheelDelta，结果变成了只能触发向上滑动的函数，还是不行，后来又知道originalEvent.wheelDelta是一个在旧版本的浏览器中使用的属性，它返回鼠标滚轮滚动的距离，单位是像素。于是我结合两者特点，将他们或起来，成功解决问题。

        后来我查了一些资料，确实或起来可以解决问题甚至是个双重保险，但下次还是用新的属性好些：

        在旧版的Chrome和Firefox中，滚动事件的 wheelDelta 属性可以用来判断滚轮滚动的方向，它是一个整数，表示当前滚动事件的滚动距离。当它大于0时，表示向上滚动，小于0时表示向下滚动。而在新版浏览器中，则使用 deltaY 属性来表示滚轮滚动的距离。而对于老的Firefox浏览器，它使用 detail 属性来表示滚轮的方向，该属性是一个整数类型，当它大于0时，表示向下滚动，小于0时表示向上滚动。

4、如何存一个全局变量

        对于这个问题，我最开始想到的是将点击的页面ID存入url中，在每次跳转页面后，会从url上取出页面ID，再通过ID获取导航栏上元素信息，以达到添加样式的效果，对于这个的实现我的第一想法就是vue的router。很明显，我没有使用vue框架，不能这么做。最后在我不懈努力下，终于找到了救星——sessionStorage，可以通过它将数据存在浏览器本地，关键是这玩意儿刷新页面数据依旧存在。

五、总结

         在本次web实验中，我选择了机动战士高达主题，并采用HTML、CSS、Js构建了一个包括5个页面的网站。通过完成这个项目，我深入了解和掌握了前端三件套的基础知识和高级特性，同时也从实践中获得了一些经验和教训。

         总体而言，通过完成这次实验，我更加深入的认识了 HTML、CSS 和 JavaScript 技术在网站开发中的应用和特点，了解到了如何实现功能和体验的平衡。同时，在完成该实验的过程也让我加深了对计算机编程和前端开发的整体认识，不断发现新的问题和解决办法，这些都将成为我未来持续学习和提升的方向。

        好了，前面都是虚的，做做样子，接下来才是我的真实想法。只能说，还是框架用着香啊。这次作业中，除了最后一个页面引入了boostrap，其他页面都是纯在用HTML、CSS、JS进行手撸实现页面和功能，真的太累太麻烦太浪费时间了，就比如gundam页面和introduce页面，两个页面有着类似的效果，只不过，前者直接用了bootstrap的Carousel组件，后者则是我手写自己完成了一个Carousel组件的功能，它们的功能一样，但我写gundam页面只用了不到一个小时吧，而写introduce页面却写了一个上午，同样的功能，却可以一用更少的时间，更少的代码量来实现，其效率不言而喻。再比如navbar这个组件，我写导航栏，要自己布局，还要自己写事件，自己设置好看的样式，而用bootstrap只需要在它的中文文档中找个好看的样式就行了，甚至它还做了屏幕适应，我的导航栏连屏幕适应都没加。还有就是，比如同样是以导航栏为例子，我的导航栏需要在每个页面中都进行添加HTML代码、CSS代码和JS代码，但如果这个时候我使用的vue，那我只需要在app文件下或者某个父页面中引入导航栏组件，并通过router-view加在父页面的HTML代码中，那么所有子页面都会有导航栏，这就不需要无聊的在每一个页面中都复制一遍代码，麻烦！况且vue的事件绑定，以及响应和vue的“v-for”，“v-if”，“v-bonnd”都是省事的一大利器。

        做了网页，又说这么多，总结一下就是遇事咱先上框架，没别人模板写得好，就别硬装，愚蠢！框架才是永远的神！最后还有一大感想——做前端，没点艺术细胞是真不行啊！