软件工程结对第二次作业——编程实现

152201106庄仲华 2024-09-30 21:19:35
项目内容
课程2401_CS_SE_FZU社区-CSDN社区云
作业要求结对第二次作业——编程实现-CSDN社区
结对学号222200209 152201106
作业目标web技术，原型设计实现、前端项目部署
其他参考文献《构建之法》

1. 项目地址

2.PSP表格

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划3045
• Estimate• 估计这个任务需要多少时间3045
Development开发16902390
• Analysis• 需求分析 (包括学习新技术）250360
• Design Spec• 生成设计文档180160
• Design Review• 设计复审6060
• Design• 具体设计600800
• Working• 具体工作600900
• Work Review• 工作复审7580
• Test测试（自我测试）2030
Reporting报告280320
• Test Repor• 测试报告100100
• Size Measurement• 计算工作量90100
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划90120
合计20002755

3.部署地址

http://120.46.27.229:8082/

4.成果展示

4.1奖牌榜

img

4.2每日赛程

img

4.3对阵表

img

img

4.4详细赛况

img

img

img

5.讨论过程

img

img

6.设计与实现

6.1功能结构图

img

6.2 分析过程

我们分析了以下网站资源，逐渐完成自己的需求分析，最后采取前端三件套进行开发
原型地址

原型地址，密码：666666

官网
Paris 2024 Olympics - Latest News, Schedules & Results
对阵表官网
Paris 2024

6.3 设计过程

在设计网页的过程中，我首先确定了页面的主要功能，包括奥运赛事的奖牌榜、每日赛程、比赛详情以及对阵表。使用HTML结构化页面内容，CSS则用来美化页面布局，确保用户界面简洁且易于导航。我为奖牌榜设计了表格，并通过动态更新数据显示每日的奖牌情况。接着，我使用JavaScript处理每日赛程的数据获取和显示，配合事件监听器，用户可以点击不同日期查看比赛安排。比赛详情和对阵表部分，则通过AJAX请求加载数据，并在指定区域动态展示。同时，注重响应式设计，确保页面在不同设备上都有良好体验。

7.关键代码展示

7.1奖牌榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gold_rank</title>

    <style>
        p {
            margin: auto;
            text-align: center;
        }
        table {
            border-collapse: collapse;
            border: 2px solid rgb(140 140 140);
            font-family: sans-serif;
            font-size: 0.8rem;
            letter-spacing: 1px;
            margin: auto;
        }

        caption {
            caption-side: bottom;
            padding: 10px;
            font-weight: bold;
        }

        thead,
        tfoot {
        background-color: rgb(228 240 245);
        }

        th,
        td {
            border: none;
            /* border: 1px solid rgb(160 160 160); */
            padding: 8px 10px;
            text-align: center;
            vertical-align: middle;
        }

        td:last-of-type {
            text-align: center;
        }

        tbody > tr:nth-of-type(even) {
            background-color: rgb(237 238 242); 
        }

        tfoot th {
            text-align: right;
        }

        tfoot td {
            font-weight: bold;
        }



    </style>

</head>
<body>

    <a href="./match.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
        赛事
    </a>

    <a href="./gold_rank.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
        奖牌
    </a>

    <div style="display:flex; justify-content: center; align-items: center;">
        <img src="https://th.bing.com/th/id/OIP.InlMmYYIR-y1sCrzNgnmCAAAAA?rs=1&pid=ImgDetMain" width="120">
    </div>

    <p > 奖牌榜</p>

    <table>

        <!-- <caption>
          奖牌榜
        </caption> -->
        <thead>
          <tr>
            <th scope="col">位次</th>
            <th scope="col">国别</th>

            <th scope="col">金牌</th>
            <th scope="col">银牌</th>
            <th scope="col">铜牌</th>
            <th scope="col">共计</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>美利坚合众国</td>
            <td>40</td>
            <td>44</td>
            <td>42</td>
            <td>126</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>中国</td>
            <td>40</td>
            <td>27</td>
            <td>24</td>
            <td>91</td>
        </tr>
          <tr>
            <th scope="row">3</th>
            <td>日本</td>
            <td>20</td>
            <td>12</td>
            <td>13</td>
            <td>45</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>澳大利亚</td>
            <td>18</td>
            <td>19</td>
            <td>16</td>
            <td>53</td>
          </tr>
          <tr>
            <th scope="row" ">5</th>
            <td>法国</td>
            <td>16</td>
            <td>26</td>
            <td>22</td>
            <td>64</td>
          </tr>
          <tr>
            <th scope="row">6</th>
            <td>荷兰</td>
            <td>15</td>
            <td>7</td>
            <td>12</td>
            <td>34</td>
          </tr>
          <tr>
            <th scope="row">7</th>
            <td>英国</td>
            <td>
                14
            </td>
            <td>22</td>
            <td>29</td>
            <td>65</td>
          </tr>
        </tbody>

      </table>


</body>
</html>

7.2每日赛程

篇幅有限，仅显示7月24日的赛程作为参考，其中，点击赛程可以查看赛事详情（7.24日 21:00 足球 男子B组(#3) 阿根廷vs摩洛哥）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=match, initial-scale=1.0">
    <title>比赛结果</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            /* background-color: #f2f2f2; */
            background-color: gray;
            /* display: flex;
             */
            display: contents;
            justify-content: center;
            padding-top: 50px;
        }
        .container {
            width: 350px;
        }
        .match {
            background-color: white;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
            box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        }
        .match-header {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        .time {
            font-weight: bold;
            color: #333;
        }
        .teams {
            margin-top: 5px;
        }
        .team {
            display: flex;
            justify-content: space-between;
            padding-top: 5px;
        }
        .team-name {
            text-align: left;
            flex-grow: 1;
        }
        .team-score {
            text-align: right;
        }
    </style>
</head>
<body>
    <a href="./match.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
        赛事
    </a>

    <a href="./gold_rank.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
        奖牌
    </a>

    <a href="./men_bracket.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
        对阵表
    </a>

    <div style="display:flex; justify-content: center; align-items: center;">
        <img src="https://th.bing.com/th/id/OIP.InlMmYYIR-y1sCrzNgnmCAAAAA?rs=1&pid=ImgDetMain" width="120">
    </div>

    <select id="dates">
        <option value="match.html">0724</option>
        <option value="match0725.html">0725</option>
    </select>
    <script src="script.js"></script>

    <div class="container"></div>
        <div class="match">
            <a href="detail.html" class="match-header">
                <span class="time">21:00</span>
                <span>足球 男子B组(#3)</span>
            </a>
            <div class="teams">
                <div class="team">
                    <span class="team-name" >阿根廷</span>
                    <span class="team-score" style="font-weight: bold;">1</span>
                </div>
                <div class="team">
                    <span class="team-name" style="font-weight: bold;">摩洛哥</span>
                    <span class="team-score" style="font-weight: bold;">2</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">21:00</span>
                <span>足球 男子C组(#5)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name">乌兹别克斯坦</span>
                    <span class="team-score" style="font-weight: bold;">1</span>
                </div>
                <div class="team">
                    <span class="team-name" style="font-weight: bold;">西班牙</span>
                    <span class="team-score" style="font-weight: bold;">2</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">21:30</span>
                <span>七人制橄榄球 男子分组循环赛B组(#M01)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name" style="font-weight: bold;">澳大利亚</span>
                    <span class="team-score" style="font-weight: bold;">21</span>
                </div>
                <div class="team">
                    <span class="team-name">萨摩亚</span>
                    <span class="team-score" style="font-weight: bold;">14</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">22:00</span>
                <span>七人制橄榄球 男子分组循环赛B组(#M02)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name" style="font-weight: bold;">阿根廷</span>
                    <span class="team-score" style="font-weight: bold;">31</span>
                </div>
                <div class="team">
                    <span class="team-name">肯尼亚</span>
                    <span class="team-score" style="font-weight: bold;">12</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">22:30</span>
                <span>七人制橄榄球 男子分组循环赛C组(#M03)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name">法国</span>
                    <span class="team-score" style="font-weight: bold;">12</span>
                </div>
                <div class="team">
                    <span class="team-name">美国</span>
                    <span class="team-score" style="font-weight: bold;">12</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">23:00</span>
                <span>七人制橄榄球 男子分组循环赛C组(#M04)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name" style="font-weight: bold;">斐济</span>
                    <span class="team-score" style="font-weight: bold;">40</span>
                </div>
                <div class="team">
                    <span class="team-name">乌拉圭</span>
                    <span class="team-score" style="font-weight: bold;">12</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">23:00</span>
                <span>足球 男子A组(#2)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name" >几内亚</span>
                    <span class="team-score" style="font-weight: bold;">1</span>
                </div>
                <div class="team">
                    <span class="team-name" style="font-weight: bold;">新西兰</span>
                    <span class="team-score" style="font-weight: bold;">2</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">23:00</span>
                <span>足球 男子C组(#6)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name" >埃及</span>
                    <span class="team-score" style="font-weight: bold;">0</span>
                </div>
                <div class="team">
                    <span class="team-name">多米尼加</span>
                    <span class="team-score" style="font-weight: bold;">0</span>
                </div>
            </div>
        </div>

        <div class="match">
            <div class="match-header">
                <span class="time">23:30</span>
                <span>七人制橄榄球 男子分组循环赛A组(#M05)</span>
            </div>
            <div class="teams">
                <div class="team">
                    <span class="team-name"  style="font-weight: bold;">爱尔兰</span>
                    <span class="team-score" style="font-weight: bold;">10</span>
                </div>
                <div class="team">
                    <span class="team-name" >南非</span>
                    <span class="team-score" style="font-weight: bold;">5</span>
                </div>
            </div>
        </div>


    </div>
    
</body>
</html>

7.3对阵表

篇幅有限，仅展示男子赛事对阵作为参考：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对阵表</title>
    <style>
    /*省略，之后展示*/
    </style>
<body>
    <div class="rectangle-box">
        <a href="./match.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
            赛事
        </a>
        <a href="./gold_rank.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
            奖牌
        </a>

        <div style="display: flex; justify-content: center; align-items: center;">
            <img src="https://th.bing.com/th/id/OIP.InlMmYYIR-y1sCrzNgnmCAAAAA?rs=1&pid=ImgDetMain" width="120">
        </div>

        <div class="dropdown-container">
            <select id="bracketSelect" onchange="handleSelection()">
                <option value="men">男子</option>
                <option value="women">女子</option>
            </select>
        </div>

        <script>
            // 设置默认选中“男子”
            document.getElementById("bracketSelect").value = "men";

            function handleSelection() {
                var select = document.getElementById("bracketSelect");
                var selectedValue = select.value;

                if (selectedValue === "men") {
                    window.location.href = "men_bracket.html";
                } else if (selectedValue === "women") {
                    window.location.href = "women_bracket.html";
                }
            }
        </script>

        <div class="header-box">
            <span>1/4决赛</span>
            <span>半决赛</span>
            <span>决赛</span>
        </div>

        <div class="bracket">
            <!-- 第一轮：四分之一决赛 -->
            <div class="round quarter-finals">
                <div class="match">
                    <div class="team-container">
                        <div class="team winner">法国</div>
                        <div class="score">1</div>
                    </div>
                    <div class="team-container">
                        <div class="team">阿根廷</div>
                        <div class="score">0</div>
                    </div>
                </div>
                <div class="match">
                    <div class="team-container">
                        <div class="team winner">埃及</div>
                        <div class="score">1(5)</div>
                    </div>
                    <div class="team-container">
                        <div class="team">巴拉圭</div>
                        <div class="score">1(4)</div>
                    </div>
                </div>
                <div class="match">
                    <div class="team-container">
                        <div class="team winner">摩洛哥</div>
                        <div class="score">4</div>
                    </div>
                    <div class="team-container">
                        <div class="team">美国</div>
                        <div class="score">0</div>
                    </div>
                </div>
                <div class="match">
                    <div class="team-container">
                        <div class="team">日本</div>
                        <div class="score">0</div>
                    </div>
                    <div class="team-container">
                        <div class="team winner">西班牙</div>
                        <div class="score">3</div>
                    </div>
                </div>
            </div>

            <!-- 第二轮：半决赛 -->
            <div class="round semi-finals">
                <div class="match">
                    <div class="team-container">
                        <div class="team winner">法国</div>
                        <div class="score">3</div>
                    </div>
                    <div class="team-container">
                        <div class="team">埃及</div>
                        <div class="score">1</div>
                    </div>
                </div>
                <div class="match">
                    <div class="team-container">
                        <div class="team">摩洛哥</div>
                        <div class="score">1</div>
                    </div>
                    <div class="team-container">
                        <div class="team winner">西班牙</div>
                        <div class="score">2</div>
                    </div>
                </div>
            </div>

            <!-- 第三轮：决赛 -->
            <div class="round finals">
                <div class="match">
                    <div class="team-container">
                        <div class="team">法国</div>
                        <div class="score">3</div>
                    </div>
                    <div class="team-container">
                        <div class="team winner">西班牙</div>
                        <div class="score">5</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bronze-medal-section">
            <h3>铜牌赛</h3>
            <div class="match">
                <div class="team-container">
                    <div class="team">埃及</div>
                    <div class="score">0</div>
                </div>
                <div class="team-container">
                    <div class="team winner">摩洛哥</div>
                    <div class="score">6</div>
                </div>
            </div>
        </div>

        <script>
            const teams = document.querySelectorAll('.team');

            teams.forEach(team => {
                team.addEventListener('mouseenter', () => {
                    const teamName = team.textContent;

                    // 高亮当前队伍
                    team.classList.add('highlight');

                    // 高亮所有与当前队伍相关的队伍
                    teams.forEach(t => {
                        if (t.textContent === teamName) {
                            t.classList.add('highlight');
                        }
                    });
                });

                team.addEventListener('mouseleave', () => {
                    const teamName = team.textContent;

                    // 移除高亮
                    team.classList.remove('highlight');

                    // 移除所有与当前队伍相关的队伍的高亮
                    teams.forEach(t => {
                        if (t.textContent === teamName) {
                            t.classList.remove('highlight');
                        }
                    });
                });
            });
        </script>

</body>

单元布局设置：

.dropdown-container {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    /* 样式：宽度为1600px的矩形框 */
    .rectangle-box {
        width: 1600px;
        height: 1800px; /* 可以根据需要调整高度 */
        background-color: rgb(255, 255, 255);
        margin: 20px auto; /* 让矩形框居中 */
        padding: 20px;
        border: 1px solid black;
    }

    .header-box {
        width: 1560px; 
        height: 60px;
        background-color: lightgray;
        border: 1px solid black;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
        margin: 20px auto;
        font-size: 20px;
    }

    body {
        font-family: Arial, sans-serif;
    }

    .bracket {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }

    .round {
        display: flex;
        flex-direction: column;
        justify-content: space-around; /* 使子元素在父元素中均匀分布 */
        align-items: center;
        position: relative;
    }

    .match {
        width: 200px;
        border: 1px solid black;
        padding: 10px;
        margin: 20px 0;
        text-align: center;
        background-color: #f9f9f9;
        position: relative;
    }

    .team {
        margin: 5px 0;
    }

    .winner {
        font-weight: bold; /* 胜方字体加粗 */
    }

    /* 使用 flexbox 让队伍名和分数在同一行 */
    .team-container {
        display: flex;
        justify-content: space-between; /* 分数和队伍在两端 */
        align-items: center;
    }

    .score {
        margin-left: 10px;
        font-weight: bold;
    }

    .highlight {
        background-color: rgb(146, 146, 144); /* 高亮颜色 */
    }

    .bronze-medal-section {
        margin-top: 50px; /* 调整与正赛之间的距离 */
        text-align: right;
        padding-top: 20px;
        border-top: 0px solid gray; /* 使用一条灰色横线将铜牌赛分隔开 */
        width: 90%; /* 宽度设为100%，使其占据整行 */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* 将内容对齐到右边 */
    }   

    /* 铜牌赛的样式 */
    .bronze-medal-section .match {
        margin: 20px 0; /* 居中显示 */
        width: 200px; /* 与其他比赛框相同的宽度 */
        border: 1px solid black;
        padding: 10px;
        background-color: #f9f9f9;
    }

    .bronze-medal-section h3 {
        margin-right: 79px;
        font-size: 24px;
        margin-bottom: 10px;
    }

7.4详细赛况

篇幅有限省略表格数据：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=match, initial-scale=1.0">
        <title>详细赛况</title>
        <style>
           /*省略，后续会展示一部分*/
        </style>
    </head>

    <body>
        <a href="./match.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
            赛事
        </a>
        <a href="./gold_rank.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
            奖牌
        </a>

        <div style="display:flex; justify-content: center; align-items: center;">
            <img src="https://th.bing.com/th/id/OIP.InlMmYYIR-y1sCrzNgnmCAAAAA?rs=1&pid=ImgDetMain" width="120">
        </div>
        <p>
            <span style="font-size: 20px;"><b>足球 男子B组 比赛3</b></span><br>
            <span style="font-size: 30px;">阿根廷 <b>VS</b> 摩洛哥 比赛成绩</span><br>
        </p>
        <div class="container">
            <a href="./men_bracket.html" style="display: inline-block; padding: 10px 20px; background-color: grey; color: white; text-decoration: none;">
                对阵表
            </a>
        </div>

        <button style="margin: auto; border: 1px solid #030303;  border-radius: 12px;">A组</button>
        <button style="margin: auto; border: 1px solid #030303;  border-radius: 12px;">B组</button>
        <button style="margin: auto; border: 1px solid #030303;  border-radius: 12px;">C组</button>
        <button style="margin: auto; border: 1px solid #030303;  border-radius: 12px;">D组</button>

        <div class="result-box">
            <div class="header">B组，比赛3</div>
            <div class="score-section">
                <div class="team">阿根廷</div>
                <div class="score">1</div>
            </div>
            <div class="score-section">
                <div class="team"><b>摩洛哥</b></div>
                <div class="score"><b>2</b></div>
            </div>
            <div class="footer">
                <div>7月24日 21:00</div>
                <div class="status">已结束</div>
            </div>
        </div>

        <div class="menucontainer">
            <button id="button1" onclick="showPanel('状态1')" style="font-size: 22px;">出赛名单</button>
            <button id="button2" onclick="showPanel('状态2')" style="font-size: 22px;">比赛详情</button>
        </div>
        <div class="panel" id="dynamicPanel1">
            <div class="rectangle">
                <p style="text-align: left; margin: 0 10px;"><span>ARG 阿根廷</span></p>
                <div class="underline"></div> <!-- 黑线 -->
                <table>
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>姓名</th>
                        <th>ST</th>
                        <th>位置</th>
                    </tr>
                </thead>
                <tbody>
                    /*省略*/
                </tbody>
                </table>
                <p style="text-align: left; margin: 0 10px;"><span>替补</span></p>
                <div class="underline"></div> <!-- 黑线 -->
                <table>
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>姓名</th>
                            <th>ST</th>
                            <th>位置</th>
                        </tr>
                    </thead>
                    <tbody>
                        /*省略*/
                    </tbody>
                </table>
                <div class="coach"><b>主教练：MASCHERANO Javier</b></div>
                <img src="ARGteam.png" alt="arg阵型">
                <h2>阵型 4-4-2 阵型</h2>
            </div>

            <div class="rectangle">
                <p style="text-align: left; margin: 0 10px;"><span>MAR 摩洛哥</span></p>
            <div class="underline"></div> <!-- 黑线 -->
            <table>
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>姓名</th>
                        <th>ST</th>
                        <th>位置</th>
                    </tr>
                </thead>
                <tbody>
                    /*省略*/
                </tbody>
            </table>
            <p style="text-align: left; margin: 0 10px;"><span>替补</span></p>
            <div class="underline"></div> <!-- 黑线 -->
            <table>
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>姓名</th>
                        <th>ST</th>
                        <th>位置</th>
                    </tr>
                </thead>
                <tbody>
                   /*省略*/
                </tbody>
            </table>
            <div class="coach"><b>主教练：SEKTIOUI Tarik</b></div>

            <img src="MARteam.png" alt="mar阵型">
            <h2>阵型 4-2-3-1 阵型</h2>
            </div>    

            <table class="referee-table">
                <tbody>
                    /*省略*/
                </tbody>
            </table>

            <div style="text-align: left;">
                <p style="text-align: left; margin: 20px;">图例：</p><br>
                <p>
                    <span style="text-align: left; margin: 20px;padding-right: 457px;">(C):队长</span>
                    <span style="text-align: left; margin: 20px;padding-right: 457px;">ST:状态</span>
                    <span style="text-align: left; margin: 20px;padding-right: 457px;">No.:号码</span> 
                </p>              
            </div>
        </div>

        <div class="panel" id="dynamicPanel2">
            <img src="match_process.png",alt="比赛过程" style="width: 1600px; height: auto;">
            <div class="dropdown">
                <button id="toggleButton" onclick="togglePanel()">
                    下半场
                    <span class="triangle"></span>
                </button>
                <div id="dropdownContent" class="dropdown-content">
                    <table class="match-stats">
                        /*省略*/
                    </table>
                </div>
            </div>
            <div style="text-align: left;">
                <p style="text-align: left; margin: 20px;">图例：</p><br>
                <p>
                    <span style="text-align: left; margin: 20px;padding-right: 419px;">H1:上半场</span>
                    <span style="text-align: left; margin: 20px;padding-right: 418px;">H2:下半场</span>
                    <span style="text-align: left; margin: 20px;padding-right: 418px;">VAR:视频裁判回看</span> 
                </p>            
            </div>
            <script>
                function togglePanel() {
                    var content = document.getElementById("dropdownContent");
                    var button = document.getElementById("toggleButton");

                    // 切换内容显示/隐藏
                    if (content.style.display === "block") {
                        content.style.display = "none";
                        button.classList.remove("active");
                    } else {
                        content.style.display = "block";
                        button.classList.add("active");
                    }
                }
            </script>
        </div>

        <script>
            function showPanel(state) {
                // 隐藏所有面板
                document.querySelectorAll('.panel').forEach(panel => {
                    panel.classList.remove('visible');
                });

                // 显示对应的面板
                document.getElementById(`dynamicPanel${state.slice(-1)}`).classList.add('visible');

                // 移除所有按钮的 active 类
                document.querySelectorAll('button').forEach(button => {
                    button.classList.remove('active');
                });

                // 为被点击的按钮添加 active 类
                document.getElementById(`button${state.slice(-1)}`).classList.add('active');
            }
        </script>    
    </body>

控制表格布局：

            table {
                width: 30%;
                border-collapse: collapse; /* 合并边框 */
                margin-top: 20px; /* 表格与其他元素的间距 */
                margin-bottom: 40px; 
            }
            th {
                background-color: #f2f2f2; /* 表头背景颜色 */
            }
            th, td {
                border: 1px solid #ccc; /* 单元格边框 */
                padding: 10px; /* 单元格内边距 */
                text-align: left; /* 左对齐 */
            }
            tr:nth-child(odd) {
                background-color: white; /* 奇数行白色 */
            }
            tr:nth-child(even) {
                background-color: #f2f2f2; /* 偶数行灰色 */
            }

赛事简要介绍：

 .result-box {
                width: 300px;  /* 矩形的宽度 */
                border: 1px solid #030303; /* 边框的样式 */
                background-color: #fff; /* 背景颜色 */
                margin: 20px; /* 外边距 */
                padding: 10px; /* 内边距 */
                box-sizing: border-box; /* 包含内边距和边框 */
                font-family: Arial, sans-serif;
            }
            .header {
                font-size: 18px;
                font-weight: bold;
                padding-bottom: 5px;
                border-bottom: 1px solid #8a8989;
            }
            .score-section {
                display: flex;
                justify-content: space-between;
                padding: 15px 0;
                border-bottom: 1px solid #ccc;
            }
            .score-section div {
                font-size: 16px;
            }
            .team {
                text-align: left;
            }
            .score {
                text-align: right;
            }
            .footer {
                display: flex;
                justify-content: space-between;
                padding-top: 10px;
                font-size: 14px;
                color: #333;
            }
            .footer .status {
                font-weight: bold;
            }

详细赛况下拉框及表格布局：

 /* 基本样式 */
            .dropdown {
                margin: 15px;
                font-family: Arial, sans-serif;
            }
            .dropdown button {
                padding: 10px 10px;
                font-size: 12px;
                border: 1px solid #030303;
                border-radius: 8px;
                cursor: pointer;
                background-color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 1600px;
            }
            .dropdown button .triangle {
                margin-left: 10px;
                display: inline-block;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 8px solid #030303;
                transition: transform 0.3s ease;
            }
            .dropdown button.active .triangle {
                transform: rotate(180deg);
            }
            .dropdown-content {
                display: none;
                margin-top: 10px;
                background-color: #f9f9f9;
                padding: 16px;
                border-radius: 8px;
                border: 1px solid #ddd;
            }
            /* 表格样式 */
            .match-stats {
                width: 1600px;
                border-collapse: collapse;
                margin: 20px 0;
            }
            .match-stats td {
                padding: 10px;
                border: 1px solid #ddd;
            }
            .match-stats tr:nth-child(odd) {
                background-color: #f9f9f9;
            }
            .match-stats tr:nth-child(even) {
                background-color: #e9e9e9;
            }
            .time-column {
                width: 20%;
                text-align: center;
            }
            .event-column {
                width: 80%;
            }

8.心路历程、队友评价

  • 心路历程：
    两人都是第一次学前端的相关知识，在这次学习中，了解了前端三件套的运作机制和使用方法，对前端的实践有了初步的了解，在构建项目的过程中，和队友不断沟通，了解实际使用需求，获得了难得的实践经历！在实践项目部署中，第一次接触到服务器，初步了解了服务器的操作和如何部署。
    在开发这个网页的过程中，我们经历了许多学习和探索的阶段。起初，面对需要展示大量数据的任务，感到有些不知所措，不仅要考虑如何组织这些信息，还要确保用户的操作体验顺畅。在编写HTML和CSS时，我们逐渐意识到结构清晰和样式简洁的重要性，这让我更注重代码的可读性和可维护性。使用JavaScript实现动态功能时，我们遇到了一些挑战，特别是在处理数据交互和异步加载时，但每次解决问题后，我们都有一种成就感。整个过程让我更加理解前端开发中“功能与美观”平衡的重要性，也让我们对网页开发产生了更浓厚的兴趣。

  • 队友评价：

    222200209 to 152201106

    我的队友在调试时非常细心，总能发现我忽略的小错误，帮助我们快速修复问题，确保项目按时交付。在讨论设计方案时，他总是能提出独特的视角，拓宽了我的思维，让我们找到更好的解决方案。

    152201106 to 222200209

    我的队友总是积极主动，乐于分享自己的知识和经验，这使得我们的编程过程既高效又充满乐趣。对项目设计有着敏锐的洞察力，能够迅速识别问题并提出合理的解决方案。

...全文
153 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
结对第二次作业——编程实现
结对第二次作业——编程实现
软件工程第二次作业——结对编程
一、作业要求 　　必做： 两人组成一队，进行结对编程从第一次软件工程作业中选出一人的作业作为这次作业的基础设计一个图形界面（GUI）的四则运算应用程序，可以是PC桌面的图形界面程序、网页程序或者手机程序设计的应用程序可以完成加法、减法、乘法、除法运算应用程序可以完成真分数的运算有退格和清屏的功能让程序能接受用户输入答案，并判定对错 增加“倒计时”功能，每个题目必须在20秒钟完成，如果完不成，得...
软件工程综合实践专题第二次作业———结对编程心得体会
软件工程综合实践专题第二次作业———结对编程 学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。 王文娟老师在课后留下了一道随机出三百道四则运算的题目并要求采用结对编程的方式和搭档共同完成 在这次的编程过程中，我和我的搭档第一次接触并采用结对编程的这种编程模式，也就是两个人同时在一台电脑上进行编程，下面是我们写出的代码以及一些在这个过程中...
js-时事通讯-设计完美HTML时事通讯的9个技巧.docx
js-时事通讯-设计完美HTML时事通讯的9个技巧.docx
AnyBackup-SQLServer应用容灾最佳实践.docx
AnyBackup-SQLServer应用容灾最佳实践.docx
2401_CS_SE_FZU

111

社区成员

870

社区内容

发帖
与我相关
我的任务
社区描述
202401_CS_SE_FZU
软件工程 高校
社区管理员
  • FZU_SE_TeacherL
  • 言1837
  • 防震水泥
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章