文章目录

• • 一、项目地址
  • • 1、仓库地址
    • 2、代码规范地址
    • 3、云服务器访问链接
  • 二、PSP表格
  • • 1、WYJ
    • 2、LLJ
  • 在这里插入图片描述
  • 三、成品展示
  • • 1、奖牌总榜
    • 2、每日赛程
    • 3、奖牌地图
    • 4、了解更多
    • 5、loading动画
    • 6、隐藏式菜单
  • 四、代码说明
  • • 1、每日赛程js代码
    • 2、奖牌地图js代码和html代码
    • 3、loading界面css代码
    • 4、了解更多
  • 五、结对讨论过程描述
  • • 1.计划及任务分配->努力赶工ing
    • 2、交互讨论->收尾工作
  • 六、设计实现过程
  • • 1、实现方法
    • 2、具体设计
    • • 2.1 关于每日赛程
      • 2.2 关于奖牌地图
      • 2.3关于了解更多
    • 3、云服务器搭建
    • 4.创意点和附加/扩展功能说明
    • 5.功能结构图
  • 七、心路历程和收获
  • • 1、WYJ
    • 2、LLJ
  • 八、结对评价

一、项目地址

1、仓库地址

https://gitcode.net/weixin_46109809/pairproject

2、代码规范地址

代码规范

3、云服务器访问链接

访问链接(建议使用火狐浏览器访问,速度比较快)

二、PSP表格

1、WYJ

2、LLJ

三、成品展示

整体网页以蓝色调为主，背景是冬奥官方图片拼接

1、奖牌总榜

奖牌总榜用粉色高亮中国，具体内容采用毛玻璃特效，在某些没有这个功能的浏览器上（大多数都有这个功能，已知只有Firefox没有），是纯玻璃效果，也还不错。

2、每日赛程

每日赛程这一页截图的是，没有毛玻璃特效的版本，可以选择日期项目场地进行查询

3、奖牌地图

鼠标放到地图上可以动态显示奖牌信息

点击右上角可以有全屏查看、打印地图、下载png、jpeg，pdf、svg等功能

4、了解更多

了解更多包括两个模块，一个是，部分中国运动员介绍和百度百科主页跳转

另一部分是问答小卡片,真实的玻璃卡片悬停效果

动态展示一下效果

5、loading动画

我们的一个小创意点，是在进入具体页面之前加了一个加载动画

6、隐藏式菜单

鼠标移动到菜单，自动弹出，点击跳转。

四、代码说明

因为时间比较赶，加上双方的编程经验很少，因此选择做纯前端。

1、每日赛程js代码

使用onChange对select选项改变进行处理
document.getElementById()获取选中的option

function gradeChange() { //选择器改变监听 //获取按钮对象   var obj = document.getElementById("riqi"); var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; var m = '' + value; if (m != "0201") {     var displayBtnElt = document.getElementById('' + value);     displayBtnElt.onclick = function () {  //获取JSON对象中的存储着数据  var d = '' + value;

用 $("#match").html(htmlStr);将串起来的字符串放到表格位置

//定义一个变量，用于存储拼接的字符串  var htmlStr = "";  for (var i = 0; i < matches.length; i++) {      //获取一条比赛信息      var match = matches[i];      var time = match.startdatecn.split(" ").join("").substring(10);      htmlStr += "";      htmlStr += "" + time + "";      htmlStr += "" + match.itemcodename.split(" ").join("") + "";      htmlStr += "" + match.title.split(" ").join("") + "";      htmlStr += "" + match.venuename.split(" ").join("") + "";      htmlStr += "" + match.statusname.split(" ").join("") + "";      htmlStr += "" + "成绩公报" + "";      htmlStr += "";  }  //将拼接的字符串放进tbody里  $("#match").html(htmlStr);     } }

2、奖牌地图js代码和html代码

这里使用了https://cdn.highcharts.com.cn/highmaps/highmaps网站里的map组件,在js中设置鼠标移动到国家的事件,然后出现标签

$("#container").highcharts('Map', {title: {text: null},//区域颜色colorAxis: {   min: 0,stops: [[0, '#EFEFFF'],[0.2, Highcharts.getOptions().colors[0]],[1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]]},//比例位置legend: {layout: 'vertical',align: 'left',verticalAlign: 'bottom'},//地图series: [{data: data,mapData: mapGeoJSON,joinBy: ['hc-key', 'key'],name: 'Gold Medal Table',states: {hover: {color: Highcharts.getOptions().colors[2]}},}, {type: 'mapline',name: "Separators",nullColor: 'gray',showInLegend: false,enableMouseTracking: false}]});}// then show it asyncif (Highcharts.maps[mapKey]) {mapReady();} else {$.getScript(javascriptPath, mapReady);}});// Trigger change event to load map on startup$('#mapDropdown').change();});

                     
奖牌地图
     
  
      
  
     
 
    

3、loading界面css代码

动态特效

*{    margin: 0;    padding: 0;    box-sizing: border-box;  }  body{    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;    background: #102626;  }  .container{    position: relative;    width: 100%;    display: flex;    justify-content: center;    align-items: center;    -webkit-box-reflect: below 1px linear-gradient(#0001, #0004);  }  .container .loader{    position: relative;    width: 200px;    height: 200px;    border-radius: 50%;    background: #0d2323;    animation: animate 2s linear infinite;  }  @keyframes animate {    0%{      transform: rotate(0deg);    }    100%{      transform: rotate(360deg);    }  }  .container .loader::before{    content: '';    position: absolute;    top:0;    left: 0;    width: 50%;    height: 100%;    background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.4));    background-size: 100px 180px;    background-repeat: no-repeat;    border-top-left-radius: 100px;    border-bottom-left-radius: 100px;  }  .container .loader::after{    content: '';    position: absolute;    top: 0;    left: 50%;    transform: translateX(-50%);    width: 20px;    height: 20px;    background: #00fff9;    border-radius: 50%;    z-index: 10;    box-shadow: 0 0 10px #00fff9,  0 0 20px #00fff9,  0 0 30px #00fff9,  0 0 40px #00fff9,  0 0 50px #00fff9,  0 0 60px #00fff9,  0 0 70px #00fff9,  0 0 80px #00fff9,  0 0 90px #00fff9,  0 0 100px #00fff9;  }  .container .loader span{    position: absolute;    top:20px;    left: 20px;    right: 20px;    bottom: 20px;    background: #102626;    border-radius: 50%;  }

4、了解更多

毛玻璃特效,只要一句话,好神奇

   backdrop-filter:blur(5px);

答题小卡片js

function answer1(){    var v=document.getElementsByName("year"); if(v[1].checked==true)  alert("没错，你答对了");else alert("不对哦，再想想") ;}

侧边栏效果

.sidemenu{    width: 15px;    height: 600px;    /* 绝对固定定位 */    position: fixed;    left: 0;    /* 垂直居中 */    top: 50%;    transform: translateY(-50%);    background-color: rgb(28, 92, 114);    /* 右上右下圆角 */    border-radius: 0 15px 15px 0;    overflow: hidden;    /* 动画过渡 */    transition: 0.3s;}.sidemenu:hover{    /* 鼠标移入，展开+改变圆角大小 */    width: 130px;    border-radius: 0 30px 30px 0;}.sidemenu:hover li a{    /* 鼠标移入，改变字体颜色 */    color: #fff;}.sidemenu::before{    content: "";    width: 50%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: -1;    background-color: lightblue;}.sidemenu .top{    width: calc(100% - 30px);    margin-left: 30px;    height: 20%;    background-color: rgb(28, 92, 114);    border-radius: 0 0 0 20px;    /* 动画过渡 */    transition: 0.2s;}.sidemenu .middle{    width: calc(100% - 60px);    height: 10%;    background-color: lightblue;    margin-left: 40px;    border-radius: 20px;}.sidemenu .bottom{    width: calc(100% - 30px);    height: 100%;    margin-left: 30px;    background-color: rgb(28, 92, 114);    border-radius: 20px 0 0 0;}.sidemenu li{    /* 绝对定位 */    position: absolute;    /* 通过var函数调用自定义属性--t */    top: var(--t);    width: 100%;    height: 10%;    font-size: 15px;    /* 弹性布局 水平垂直居中 */    display: flex;    justify-content: center;    align-items: center;}.sidemenu li a{    /* 字体颜色透明 */    color: transparent;    /* 动画过渡 */    transition: 0.3s;}/* 分别为每一个li元素设置.top的高度 *//* ~是兄弟选择器 */.sidemenu li:nth-child(1):hover ~ .top{    height: 20%;}.sidemenu li:nth-child(2):hover ~ .top{    height: 30%;}.sidemenu li:nth-child(3):hover ~ .top{    height: 40%;}.sidemenu li:nth-child(4):hover ~ .top{    height: 50%;}.sidemenu li:nth-child(5):hover ~ .top{    height: 60%;}.sidemenu li:nth-child(6):hover ~ .top{    height: 70%;}

五、结对讨论过程描述

1.计划及任务分配->努力赶工ing

2、交互讨论->收尾工作

• 刚拿到题目,因为是熟悉的题目,在宿舍里讨论决定用纯css开发之后,就直接分工了.遇到问题就上网查,或者问问和自己负责同样部分代码的同学是怎么做的,然后顺利解决了.

六、设计实现过程

1、实现方法

纯前端，用visual code和txt直接写。

2、具体设计

2.1 关于每日赛程

• 为每个select都设置了一个onChange(),对选择的改变进行事件处理
• 用document.getElementById(“riqi”)获取当前的select,
  obj.selectedIndex获取选中索引
  obj.options[index].text 获取选中文本
  value = obj.options[index].value获取选中value
• 获取需要的json对象,并加入字符串
• 用$("#match").html(htmlStr)放进tbody里

2.2 关于奖牌地图

• 这里主要使用了一个网站的地图,然后通过判断feature.properties[‘name’]判断国家实现对国家按金牌排名的颜色设置

2.3关于了解更多

1.弹出式导航栏(菜单)

• 做原型时候可开心，随便点一点，拖个框进来，弹出式菜单就做好，实际到了写代码的时候，很不扎实的web基础，让我陷入痛苦。于是我找到了b站之前关注的前端博主，幸好记忆里他好像发过弹出式菜单的制作教程，跟着视频打，终于搞出来了。甚至还升级了一下，不用点击，只要把鼠标往左侧放，菜单就可以弹出来。

导航栏样式迭代:

• 本来想用iframe把菜单栏嵌入页面，这样可以省很多冗余代码，而且修改菜单栏时候，可以只用修改一个html，每个页面只要引入iframe就好了，但是发现页面实现跳转时候，只有iframe那个小框框跳转到了新页面，外面那个页面没有改变，于是意识到跳转菜单栏可能还是得嵌在本体上，不能放iframe里.。

2.百度百科个人主页推送：

• 在写详细赛况里面的介绍运动员的时候，我突然觉得，虽然版面简洁没有大段文字可以让用户避免视觉疲劳，失去看下去的欲望，但是里面的信息确实是比较少，应该给用户提供一个能够了解这个运动员更多信息的途径。
• 首先想到肯定是冬奥官网，但是我发现官网关于运动员的信息确实比较少（可能官网更侧重比赛信息吧吧），于是我转向了百度百科，百度百科信息丰富，图文并茂还有视频和相关介绍，成为了我的最终决定

3、云服务器搭建

• 我研究服务器部署比较久，大概研究了三四个小时，看了很多文章和视频教程。其实配置没有那么复杂----b站教程 .
• 很多时间耗费在了试错和了解相关知识上，再加上网上教程的时间都比较早，操作方法,页面版本也不一样，服务器价格和类型也不一样，就会比较怕搞错。但其实还挺值得的，了解到了很多相关知识。
• 最后还得在这里感谢一下，phpStudy的开发者，这个一键集成云服务器环境配置的软件真的太好用了,下载完一开就能配置好环境.

4.创意点和附加/扩展功能说明

在上一次作业关于冬奥赛事的nabcd模型分析中，我认为主要的竞争点有宣传(这次没有发挥的地方).数据分析(时间技术不足,但是可以完成基本要求)和用户体验,这次我们实现时候侧重的是用户体验.

基础功能已经按照要求做完,下面的是增加的功能:

1.可伸缩菜单栏---------------------优化

给主页更多展示的空间,并且不会随着页面往下滑动消失,一直是隐藏在左边

2.loading页面--------------------优化

加载过程中,用户可能会忍不住对没加载完的组件进行点击,如果组件没有响应的话,用户可能多次点击,导致页面崩溃;加载过程中,用户也有可能意识不到已经开始加载,而简单认为系统崩溃,所以此时的loading页面就可以发挥作用.
但是这次实现的比较糙,只是在开头加了一个,并且强制要求它播放三秒钟,加强网站的辨识度.

3.地图的附加功能---------------------扩展功能

实现了全屏查看、打印地图、下载png、jpeg，pdf、svg等功能
感觉还挺实用,想要细细查看地图内容和打印结果的时候就很方便.

4.答题小卡片---------------------附加功能2：了解更多

帮助大家记忆冬奥相关知识,增加互动性

5.运动员百度百科主页和信息显示---------------------附加功能2：了解更多

节约版面,简化版面,避免用户视觉疲劳,失去阅读欲望,同时又因为有跳转相关百度百科的功能,使得对这个运动员有兴趣的用户可以了解到更多相关信息.

5.功能结构图

七、心路历程和收获

1、WYJ

1.1 心路历程

• 刚看到这个作业其实有点不知道从何下手 （可能时自己太菜了），本来开始想要不试着学着做一下前后端分离，但感觉这周事情有点多，以前没什么基础，都得重学，所以跟队友商量后还是选择纯前端，大概就是html、css、JavaScript做这次的作业。在做奖牌地图是还是遇到了困难，但，一点点学还是算勉强做出来了，据每日赛程也设计到一个用js处理数据的问题，但办法总比困难多，后面还是一点点做出来了 （开心！）

1.2 收获

• 学到了新的知识，比如用组件做地图、部署云服务器、数据处理
• 巩固了web知识，对css、html能有一个更深的掌握
• 通过去看别人的博客，听其他组的展示也了解到了一些新的web知识，一些框架，组件，数据库，包括在面对相同问题的时候别人的解决办法，也是对自己的一个提升 + 又一次的双人结对合作，感觉跟队友更加默契了，沟通也更好了，在上一次的合作中了解到了队友的优势地方，合理运用，吸取上一次结对里面做的不好地方的教训，进行改正，提高了结对效率

2、LLJ

2.1.学习借“前人”的力

还记得上次我的感受就包括一条，学习前辈的经验和做法。这次实践更加有感触。

• 借力1：参考官网写法

  首先，是我的队友，她想到，既然上次我们可以去冬奥官网爬取json数据，那是不是我们在编写html文件时候，也可以打开开发者模式，参考官网上面的代码呢，毕竟他们的页面格式比较规范，也比较专业，借鉴他们好的地方，然后再加入很多自己的原创。

• 借力2：从axure获取图标

  其实我们原本不知道原型原来可以生成html代码的，但是我看到作业要求里面，“直接用原型生成代码的话，编程部分零分”，我恍然大悟，原来还有这种操作。Html代码我们肯定自己写，但是，一些小图标，小矩形什么的ipg，我们可以直接从生成的文档中获取，省去了自己一个个截图的痛苦（而且还老是截不整齐，会留出白边）.

• 借力3：在线转换工具

  前文提到，我需要复用html写的菜单栏，但是没有直接复用html的办法，iframe的方法会影响页面跳转，于是只好改为给每个页面加个菜单栏，但是！我的朋友告诉我，网上有一个在线html转js网站，我可以把菜单栏转换为JavaScript文件，然后在每一个需要引用菜单栏的地方嵌入js文件。
  感谢这些制作在线转换的大佬们，还有上次个人作业的在线转义反转义网站，真的解决了很多问题。

• 借力4：网络丰富的css页面效果

  在b站等网站找到了很多开源的有趣页面效果，比如我的鼠标移动响应菜单栏，比如鼠标移动响应人物介绍卡片，有参考网上看到的css样式，经过修改颜色形状适应本土化.
  Ps.有记得在看完每个教程之后给每个博主点赞投币，评论感谢分享，希望后续他们能输出更多美妙的css版面和特效。
  感恩！

2.2.visualcode插件推荐

• 在上网看教程时候看到一个很不错的插件，叫live server，在visualcode里可以直接安装，能一边修改css一边实时查看修改效果，免去了保存css和刷新页面的繁琐，就是需要配置环境有些令人疲惫，在网上看css教程，基本上每个博主人手一个。

2.3感悟

• 大家都好厉害啊，之前的基本功都很扎实，对于web实践课上学的yii2框架我只有痛苦挠头的经历——演示前一天晚上因为没做完害怕被老师挂掉，熬夜到凌晨四点苦学yii，下辈子都不想碰了。没想到看到有同学用yii活学活用做这次的作业，我真是佩服。
• 还有一些用vue框架，springboot框架，bootstrap的同学，对这些框架，我最多就知道个名字，还记得那个寒假有个小伙伴正好做项目——
  他：0+0+，我最近在做项目，学vue框架，你要不要和我一起学呀？
  我：好啊好啊，vue框架听起来很厉害呢！
  寒假过去了，他现在看起来vue框架掌握的不错，我：端口怎么改来着，我wamp怎么绿不了？好奇怪，上学期明明是绿的！

0+还是很需要再努力呀

八、结对评价

• WYJ to LLJ

第二次与LJ结对合作了，这次感觉更好了，通过第一次结对合作知道了LJ会比较细心，很好地体现了“慢工出细活”这句话，因为是在同一个宿舍交流也很方便，实时沟通，所以，这次我可能代码会写得多一点，但像部署云服务器、建分支这些都是LJ去弄的，也减少了我这部分的工作，超级棒的。只是,感觉队友的积极性不是很高,有时进度会有点慢,我可能要时不时的催一下,以ddl给她一点紧迫感,但,她很好沟通,会听取意见,然后努力工作.

总结一下:
LJ还是很不错的,细心,而且感觉我们很互补,很适合结对.

• LLJ to WYJ

我的队友真是大好人，我这周运气特别“好”，每一门课的小组任务正好都随机到了我在的小组，软工实践开题报告也正好是比较偏向pm的任务（我比较想在团队内担任pm和策划），于是我就负责完成了调研分析演讲相关的任务，甚至连宿舍轮流做卫生都轮到了我，我的队友得知我的这些倒霉事之后，感觉很搞笑之余，默默的分走了这次作业最难的两个部分，世界地图和每日赛程，感动到了。

队友很有担当，对共同的进度把控很好,有时候我也开玩笑说她是我的监工（监工在项目里确实很有必要）。而且我们水平相近，不会出现一方一味付出的情况，更多是互相分享经验。我做事慢吞吞，能在ddl前两个小时之前完成，已经是我的人生巅峰了，她对于进度的把控很实在，虽然做事有时候注意不到小细节，但是是真的快，而且大体上没有什么太大差错，我们简直就是软工实践课上老师说的“萝卜快了不洗泥VS慢工出细活” 的真人版组合。

总结一下：
队友优点是好沟通、速度快；合作中也有感觉到，可能是性格原因，对一些细节不是很有耐心去扣，也容易落下一些重要信息，但是正好和我互补，分工合作之后也问题不大了。