目录

基本内容

部署服务器IP

110.41.174.40:8890

华为云仓库

222200103_222100301

PSP表格

设计实现过程

功能结构图

奖牌榜

HTML上主要分为4个大的模块，一个是顶部的导航栏，一个是顶栏+标题，一个是主要的内容，一个是底栏。
主要的奖牌排名使用的是table标签，每条排名信息是一行，而具体的排名、国家、金银铜总奖牌数是一列，这样布局非常规整，也比较符合逻辑。
CSS样式上主要是仿照参考网站编写。
因为是使用纯前端开发，所以数据的读取，以及table里组件的创建，都通过JS进行（具体详见代码展示）。

每日赛程

每日赛程的实现比较复杂，有以下几个主要的功能点：

1. 数据的读取和展示
2. 日历的显示
3. 切换日期的功能

其中数据的读取展示依旧是使用类似的方法解析JSON文件，并在JS中创建。
而日历是纯HTML+CSS实现的，具体的实现方式是：日历分为日历按钮和日历体两个部分，分别分装在两个div中。日历按钮可见，而日历体初始设置为不可见，当鼠标停在日历按钮上时，利用伪类选择器显示日历体。同时添加了一些简单的动画。
代码见代码展示。

对阵图

对阵图的设计时，最外层容器主要采用grid布局。其中连接线是通过设计边框样式实现的。

首页

首页有轮播图，每隔3秒自动播放。还能够点击按钮进行左右轮播。

具体代码说明

读取数据并创建标签（以奖牌榜为例）

数据在medalsTable中，使用init函数，创建tbody中的标签。
大部分的数据可以直接读取到，国旗通过国家名拼接成相对路径显示。

function init() {
    tbody.innerHTML = medalsTable.map(function (value, index) {
        return `
     <tr>
              <td><b>${value.rank}</b></td>
              <td><img width="40px" src="../static/pictures/flags/${value.organisation}.png"> ${value.longDescription}</td>
              <td>${value.medalsNumber[getTotal(value.medalsNumber)].gold}</td>
              <td>${value.medalsNumber[getTotal(value.medalsNumber)].silver}</td>
              <td>${value.medalsNumber[getTotal(value.medalsNumber)].bronze}</td>
              <td><b>${value.medalsNumber[getTotal(value.medalsNumber)].total}</b></td>
            </tr>
            `
    }).join(' ')
}

奖牌是以数组形式（medalsNumber）存储在JSON中，而离谱的是total的位置居然是不固定的。所以写了一个简单的函数来帮助定位到total所在的数组下标。

function getTotal(medalsNumber) {
    for (let i = 0; i < medalsNumber.length; i++) {
        if (medalsNumber[i].type === "Total")
            return i;
    }
    return -1;
}

日历功能

日历体分为两个部分，一个是顶栏，一个是日期的部分。这个日历的功能其实比较简单，不需要切换年月之类，所以只是通过表格创建了一个静态的日历。
表格的每个单元格都使用a标签，这样就可以实现点击时跳转到该页面的对应位置。

<div class="calendar-body">
        <div class="shell">
          <header>
            <div><img src="../static/pictures/calendar.svg" width="50px"></div>
          </header>
          <table class="calendar2">
            <thead>
            <tr>
              <td>一</td>
              <td>二</td>
              <td>三</td>
              <td>四</td>
              <td>五</td>
              <td>六</td>
              <td>日</td>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td> </td>
              <td> </td>
              <td><a href="#july24">24<br>7月</a></td>
              <td><a href="#july25">25<br>7月</a> </td>
              <td><a href="#july26">26<br>7月</a> </td>
              <td><a href="#july27">27<br>7月</a> </td>
              <td><a href="#july28">28<br>7月</a> </td>
            </tr>
            <tr>
              <td><a href="#july29">29<br>7月</a> </td>
              <td><a href="#july30">30<br>7月</a></td>
              <td><a href="#july31">31<br>7月</a></td>
              <td><a href="#aug1">1<br>8月</a></td>
              <td><a href="#aug2">2<br>8月</a></td>
              <td><a href="#aug3">3<br>8月</a></td>
              <td><a href="#aug4">4<br>8月</a></td>
            </tr>
            <tr>
              <td><a href="#aug5">5<br>8月</a></td>
              <td><a href="#aug6">6<br>8月</a></td>
              <td><a href="#aug7">7<br>8月</a></td>
              <td><a href="#aug8">8<br>8月</a></td>
              <td><a href="#aug9">9<br>8月</a></td>
              <td><a href="#aug10">10<br>8月</a></td>
              <td><a href="#aug11">11<br>8月</a></td>
            </tr>
            <tr>
              <td><a href="#aug12">12<br>8月</a></td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
              <td> </td>
            </tr>

            </tbody>
          </table>
          <div class="ring-left"></div>
          <div class="ring-right"></div>
        </div>

样式上做了简单的美化，鼠标移到日期上会有高亮显示，移开后会渐渐消散。
通过CSS的伪类选择器实现。

.calendar2 tbody td:hover{
  background: #d9d9d9;
  color: #fff;
  font: 600 23px ' ';
}

.ring-left,
.ring-right{
  position: absolute;
  top:265px;
}

.ring-left{
  left: 2em;
}

.ring-right{
  right: 2em;
}

首页轮播

<div class="carousel">  
        <div class="carousel-slides">   
            <div class="carousel-slide"><img src="../static/pictures/2.jpg" alt="Image 2">
                <span class="carousel-text">2024年巴黎奥运会：法兰西体育场见证奥运会告别巴黎，相约洛杉矶2028！</span>
            </div>  
            
            <div class="carousel-slide"><img src="../static/pictures/3.jpg" alt="Image 3">
                <span class="carousel-text">奥运冠军杰西卡·冯·布雷道-韦尔恩德的优雅之旅|ATHLETES TO WATCH</span>
            </div>
            
            <div class="carousel-slide"><img src="../static/pictures/4.jpg" alt="Image 4">
                <span class="carousel-text">基兰·莱利骑上世界舞台|ATHLETES TO WATCH</span>
            </div>           
        </div>  
        <a class="carousel-control prev" onclick="changeSlide(-1)">&#10094;</a>  
        <a class="carousel-control next" onclick="changeSlide(1)">&#10095;</a>
</div>

let slideIndex = 1;  
showSlides(slideIndex);  
setInterval(changeSlide, 3000, 1);

  
// 更改幻灯片  
function changeSlide(n) {  
    showSlides(slideIndex += n);  
}  
  
// 显示幻灯片  
function showSlides(n) {  
    let i;  
    let slides = document.getElementsByClassName("carousel-slide");  
    if (n > slides.length) {slideIndex = 1}      
    if (n < 1) {slideIndex = slides.length}  
    for (i = 0; i < slides.length; i++) {  
        slides[i].style.display = "none";    
    }  
    slides[slideIndex-1].style.display = "block";      
}

成品展示

奖牌榜

每日赛程

跳转详细赛况

日历

切换日期

详细赛况

切换赛况

对阵表

高亮

首页

轮播

跳转

结对讨论过程描述

确定技术栈

统一目录结构

复用对方写好的内容

交流问题

讨论git使用方法

心路历程和收获

222100301辛拉面
我之前从来没有研究过前端相关的知识，发现居然必须做网页之后就是一种完蛋了赶紧学的心理。学习上主要是网课+实践+到处查问题的形式，一开始也碰了很多壁，比如还没确定技术框架的时候看了一些springboot/vue之类的内容看得头脑发昏，看懂了和会写了也是完全两回事。好在html和css上手还是很快的，js有编程基础也可以比较快理解（依然很难），熬了两个通宵狂写，家里还刚好有事，在火车上都在想bug怎么改。
要说痛苦肯定是痛苦的，但是也确实是收获颇丰，一个星期前前端三件套只是好像听过的程度，一个星期后已经可以独立写屎山代码。绝对是少有的人生体验，也大概体验了以下以后可能的工作强度。总之加油！！！

222200103wzj

我之前很少进行网页设计的经验。之前写的代码，组件大多是复用别人的组件库，css样式等不会设计。通过本次网页设计，我学习了很多样式的设计，比如如何布局，如何设计对齐等样式。当我能够设计出心中所想的样式时，我感到非常开心，颇有成就感。这次设计收获很多，再接再厉吧。

评价结对队友

222100301辛拉面
一方面要真诚地感谢我的队友不断push，有时候看到消息“代码看一下”“看下内容”马上两眼一黑，但真的是很好地在我焦虑和怀疑人生的时候给予了我足够的激励，毕竟是团队作业不能拖后腿。众所不周知我之前从来没有接触过前端技术，这次作业过程简直如梦似幻可歌可泣，有几个瞬间想把电脑丢进河里报告老师写不了了，想一想不是我一个人的作业就只好继续苦哈哈地学了写写了学。
另一方面感谢队友的包容，由于我惨不忍睹的前端技术相信队友也有很多两眼一黑的瞬间。能够两个人一起讨论研究问题所在真是太好了。很高兴这次可以一起结对完成任务，期待等下次轮到我擅长的技术方向时能一起继续合作~

222200103wzj

队友十分认真，富有责任感。作业布置之后能够快速开始任务。能够积极参与讨论存在的问题，并认真分析。在相互讨论和交流代码时，她也给了我很大的灵感，帮助我更好地完成任务。最重要的是任务总能及时完成，，时间紧张时也能够熬夜加班。呃就是回消息慢了点。
总体合作过程十分愉快，希望下次能够继续合作。