结对第二次作业--编程实现

222000312彭季菖学生 2023-03-24 23:48:13

这个作业属于哪个课程	<2023年福大-软件工程实践-W班>
这个作业要求在哪里	<结对第二次作业>
结对学号	<222000312 　22000314>
这个作业的目标	<Gitcode的合作使用、原型设计的编码实现>
其他参考文献	《构建之法》

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	30	30
Development	开发	2360	3340
• Analysis	• 需求分析 (包括学习新技术）	120	180
• Design Spec	• 生成设计文档	100	80
• Design Review	• 设计复审	50	30
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	10	10
• Design	• 具体设计	300	500
• Coding	• 具体编码	1200	2000
• Code Review	• 代码复审	200	250
• Test	• 测试（自我测试，修改代码，提交修改）	400	300
Reporting	报告	160	270
• Project Repor	• 项目报告	120	250
• Size Measurement	• 计算工作量	50	40
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	30
SUM	总计	2610	3700

5.成品展示

5.1 首页（轮播图）

5.2 导航栏

5.3选手排名

5.4比赛详情

5.5晋级图

6.功能设计实现

（1）首页：上方一个导航栏，中间一个页面轮播图（宣传澳网的精彩瞬间），右上角一个链接可以跳转至详情页面。

（2）选手排名图：分为男子和女子选手的Ace数排名图，按Ace数从高到低进行排列

（3）每日赛程图：通过数据输入实现了查看近期全部的赛程信息

（4）晋级图：实现了前四轮的晋级情况（八强赛分组查询）

（5）了解更多：可以使用户了解到更多关于澳网的信息，同时也能了解到澳洲的基本信息，增加客户黏性。

7.代码实现

首页的轮播图是通过在js之中编写函数来完成的，并通过定时器来实现图片的定时切换（还能通过按钮切换图片）

//1.获取相关元素。
var box = document.getElementById("all");
var ul = box.children[0].children[0];
var ol = box.children[0].children[1];
var ulLiArr = ul.children;
//2.补齐相互盒子
//1.复制第一张图片所在的li，填入所在的ul中。
var newLi = ulLiArr[0].cloneNode(true);
ul.appendChild(newLi);
//2.生成相关的ol中的li。
for(var i=0;i<ulLiArr.length-1;i++){
var newOlLi = document.createElement("li");
newOlLi.innerHTML = i+1;
ol.appendChild(newOlLi);
}
//3.点亮第一个ol中的li。
var olLiArr = ol.children;
ol.children[0].className = "current";
//3.鼠标放到小方块儿上，轮播图片。
for(var i=0;i<olLiArr.length;i++){
olLiArr[i].index = i;
olLiArr[i].onmouseover = function () {
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[this.index].className = "current";
animate(ul,-this.index*ul.children[0].offsetWidth);
key = square = this.index;
}
}
//4.添加定时器。
var timer = null;
var key = 0;
var square = 0;
timer = setInterval(autoPlay,1000);
function autoPlay(){
key++;
square++;
if(key>olLiArr.length){
key=1;
ul.style.left = 0;
}
animate(ul,-key*ul.children[0].offsetWidth);
square = square>olLiArr.length-1?0:square;
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[square].className = "current";
}
//5.鼠标移开开启定时器，鼠标放上去开启定时器。
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(autoPlay,1000);
}
//6.左右切换的按钮。
var btnArr = box.children[0].children[2].children;
btnArr[0].onclick = function () {
key--;
square--;
if(key<0){
key=4;
ul.style.left = -5*ul.children[0].offsetWidth + "px";
}
animate(ul,-key*ul.children[0].offsetWidth);
square = square<0?olLiArr.length-1:square;
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[square].className = "current";
}
btnArr[1].onclick = function () {
autoPlay();
}

页面的初始化操作

window.onload = function(){
...
}

导航栏和基本结构的css

#nav {
display:inline-block;
list-style-type: none;
overflow: hidden;
background-color:rgb(251, 109, 57);
position: fixed;
margin-top: 0;
top: 0;
width: 100%;
height: 8%;
margin-bottom: 0;
text-align:center;
}
.nav_li {
display: inline;
background-color:rgb(85, 197, 40);
color: rgb(95, 228, 19);
box-shadow: 5px 5px rgb(29, 18, 18);
text-align: center;
margin-top: 0;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
width: 8%;
height: 100%;
font-size: x-large;
}
a {
text-decoration: none;
}
span {
background: linear-gradient(to right,#46df20,#e4f718) no-repeat right bottom;
background-size: 0px 2px;
transition: background-size 1300ms;
color: #3d07f0;
animation: sb 1s ease-in-out infinite alternate;
}
span:hover {
background-position-x: left;
background-size: 100% 2px;
}
@keyframes sb{
to{
color:white;
text-shadow: 20px 0 70px white;
}
}
#under {
top: 8%;
bottom:0;
width: 100%;
background-color: rgb(0, 140, 255);
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
scroll-snap-type: y proximity;
}

导航栏html

<ul id="nav">
<li draggable="true" class="nav_li"><a href="main.html">Australia Open</a></li>
<li draggable="true" class="nav_li"><a href="每日赛程.html">Daily Schedule</a></li>
<li draggable="true" class="nav_li"><a href="选手排名.html">Players Ranking</a></li>
<li draggable="true" class="nav_li"><a href="晋级图.html">Promotion Chart</a></li>
<li draggable="true" class="nav_li"><a href="about.html">Learn More</a></li>
</ul>
<div id="under">

8.结对讨论过程

我们发现本次实践作业十分适合采用vue框架来编写，但是由于我们两都不曾接触过vue，对前端编程也不是很熟悉（敲了两年半的C．．．ＪＡＶＡ．．．），再加上本次作业时间非常的紧张，在初次尝试以失败告终之后我们只能粗略地采用基础的前端代码来进行构建。再讨论了大致方向及确定了细节上与之前制作原型的不同后，我们就开始了分工合作（大部分都是我们在宿舍面对面进行讨论的所以没什么截图）。

222000312负责选手排名、详细赛况、导航栏、和晋级图

222000314则搞定首页、轮播图、Ａｂｏｕｔ（了解更多）以及博客

9.心路历程与收获

222000312：在这次开发中我还明白了编程习惯的重要性，许多时候因为没有对元素进行命名，其他内容使用了相同元素而产生css冲突，最终浪费了许多数据。虽然第一次作业设计的原型模型十分简洁，使用html+css+js就可以完成，但是看着身边同学用各种框架完成各种高级特效，而自己却只能渐渐降低编程要求，更能感受到跟其他人的差距。

222000314：在刚刚开始结对编程时，由于没有多人一起编程的经历，显得有些不知所措，不知道应该如何去安排和分配任务，又如何将两个人的成果组合起来以达到一加一大于二的效果。但是随着结对编程的进行，我开始领悟到了ｔｅａｍ的重要性，一个人的经历始终是有限的，而在一个小团队中，哪怕是只有两个人，他也能在你犯错误的适合及时发现，并在你失意时给予你鼓励与你并肩同行，老话说的好，团结就是力量，希望经历了本次的结对作业以及之后的团队编程，能够让我从中学到许多。

10.相互评价

222000314->222000312：彭季菖同学在本次实践开发的过程中上手很快且开发效率很高，我跟他提出的想法都能很快的得到实现，并且在开发过程中也十分严谨，揪出了几个我不曾发现的小毛病并且加以改善。而且我们组的开发氛围也十分的良好，就算有时候出现分歧也能很快心平气和的讨论出一致意见。通过这次结对作业的锻炼，我对前端开发有了深刻的认知。在将来的实际项目中涉及的技术通常较广也更加复杂，很难保证充分掌握，所以开发环节的时间不容易缩短，还是需要多上手实践以积累经验。

222000312->222000314：在这次的结对编程中，我发现了小伙伴有以下优点：1.有耐心。在编程的过程中遇到困难能够想办法去解决。2.够专注。完成作业的时候不会被环境干扰。通过这次结对编程，让我学习了很多东西，让我提高了一些重要能力。1.团队合作能力。一个团队要取得高效的工作，团队成员必须力往一处使，必须相互配合。2.交流表达能力。团队之间的沟通是很有有必要的，沟通才能发现很多问题。

...全文