[前端开发 | 考研加油界面] 前端开发

Elik-hb

已于 2024-06-19 09:30:51 修改

阅读量211

点赞数 3

分类专栏： javaweb java 文章标签：前端 javascript 服务器 html

于 2024-04-24 11:06:03 首次发布

本文链接：https://blog.csdn.net/qq_65099052/article/details/138152811

版权

java 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javaweb

5 篇文章 0 订阅

订阅专栏

题注：开发这样一个为考研学生提供支持和鼓励的前端项目是我在学习的时候偶然想出，想时刻为自己提醒我要加油，希望能够给大家能够使用。在开始这个项目之前，我向所有的考研学生发出最诚挚的祝愿：

🌟 愿你们的努力都能开花结果，每一天的辛勤汗水都能转化为未来的成功。
📚 在追逐梦想的路上，希望你们保持坚定的信念和持续的动力，不畏艰难，勇往直前。
💪 面对挑战和困难，希望你们能展现出坚韧不拔的精神，每一个难关都是向成功迈进的一步。
🤗 在你们的学习旅程中，无论遇到什么问题，都希望你们能找到支持和解决的方式，记得，你们从不孤单。

为了实现你们的目标，我希望这个项目能为你们提供实时的支持与激励。这个项目不仅仅是一个技术作品，更是对你们考研路上坚持和努力的一份见证。让我们一起加油，一起努力，为了每一个心中的梦想，为了更美好的明天！ 🌈

现在，让我们开始这个项目的开发吧！如果你有任何问题或需要进一步的帮助，请随时告诉我。

使用到的样式库

1. Bootstrap

Bootstrap 是一个非常流行的前端框架，广泛用于开发响应式和移动优先的网页。它提供了一套丰富的预定义样式和组件，如网格系统、按钮、表单控件、导航组件等。在这个项目中，使用Bootstrap 用于快速布局和样式化组件，使开发更高效，并确保了网站在各种设备上都具有良好的显示和功能性。

2. Layui

Layui 是一个轻量级的前端 UI 框架，主要面向快速前端界面开发。它提供了一些简单易用的 UI 组件，如弹出层、表单元素和自定义弹窗等。Layui 旨在提供一种简洁而不失优雅的界面操作体验，非常适合需要快速原型设计和轻量级页面构建的项目。

3. Font Awesome

虽然您的项目代码中没有直接提到 Font Awesome，但它是一个广泛使用的图标集和工具库，常与 Bootstrap 和其他前端框架一起使用。它提供了数以千计的矢量图标，可用于增强网页的视觉表达和用户界面设计。如果您需要在项目中使用图标，Font Awesome 是一个很好的选择

页面开发页面展示

主页面会展示模态框，显示自己记录的大学
顶部的横栏可以实现左到右动画效果
点击更新可以弹出自定义弹出框样式
实现加油打气，可以有加油的声音，还可以更新文字

在这里插入图片描述

点击左下角的启动，可以播放音乐，还可以切换显示，并且实现和点击加油打气不冲突，之前版本实现的就是会冲突占用

第1步：项目初始化

创建项目目录：在您的电脑上选择一个合适的位置创建一个新的文件夹，比如叫做kaoyan-jiayou。
设置开发环境：
- 安装Node.js和npm（Node包管理器）。
- 安装一个代码编辑器，如Visual Studio Code。

第2步：搭建基本结构

创建HTML文件：在项目目录中创建一个名为index.html的文件。
创建CSS文件：创建一个styles.css用于存放样式。
创建JavaScript文件：创建一个scripts.js用于编写JavaScript代码。

第3步：编写HTML内容

在index.html中定义网页的基本结构，包括头部（head）和身体（body）。
添加必要的元素，如导航栏、按钮、输入框等。

第4步：添加样式

在styles.css中添加样式来美化您的网页。
使用CSS来布局页面，例如设置颜色、字体、边距等。

第5步：实现JavaScript功能

在scripts.js中编写脚本来实现动态功能：
- 音频控制：编写函数来播放和停止音乐。
- 动态鼓励：实现一个函数来随机显示鼓励语句。
- 问题解答：编写功能响应用户点击，提供预设的解答。
- 本地存储：使用localStorage来保存和显示用户的大学选择。

第6步：集成第三方库

使用CDN链接引入如Bootstrap和Layui等库来增强页面的功能和美观。

第7步：测试

在不同的浏览器上测试网页以确保兼容性。
测试所有的功能，如按钮点击、音乐播放是否正常工作。

开始开发

初始化项目：可以在命令行中运行以下命令来创建初始文件：

mkdir kaoyan-jiayou
cd kaoyan-jiayou
echo "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>考研加油</title></head><body></body></html>" > index.html
echo "body { font-family: Arial, sans-serif; }" > styles.css
echo "console.log('Welcome to 考研加油!');" > scripts.js

编辑代码：使用您选择的代码编辑器打开这个项目目录，开始编辑index.html、styles.css和scripts.js文件。

样式说明

1. 如何实现顶部滚动的文字样式

在这个项目中，作者使用了 CSS 动画来实现顶栏中文字的横向动态效果。这种效果通常通过 CSS 的 @keyframes 规则来定义动画，然后将其应用到指定的元素上。下面是如何实现这种动态滚动文字效果的详细解释：

CSS @keyframes 规则

@keyframes 规则用于创建动画序列，您可以指定动画开始和结束时元素的样式。在您的案例中，动画使得文字从右向左移动，创建了一个横向滚动的效果。

实现步骤

定义动画：首先，您需要定义一个动画序列，指明在动画开始和结束时元素的状态。例如，可以让元素从完全位于视图右侧开始移动，到完全移出视图左侧结束。
应用动画：然后，将这个动画应用到您想要动态显示的元素上，并设置动画的持续时间、循环次数等属性。

代码

这里是一个基本的示例代码，展示了如何实现文字的横向动态滚动：

@keyframes slide {
    0% {
        transform: translateX(100%); /* 开始时，元素位于视图右侧之外 */
    }
    100% {
        transform: translateX(-100%); /* 结束时，元素移动到视图左侧之外 */
    }
}

.encouragement-navbar {
    white-space: nowrap; /* 确保文本在一行内显示，不换行 */
    overflow: hidden; /* 隐藏超出部分 */
    animation: slide 10s linear infinite; /* 应用动画，持续时间10秒，匀速，无限循环 */
}

详细解释

white-space: nowrap; 确保所有文本都在一行显示，防止它在动画过程中换行。
overflow: hidden; 隐藏溢出容器的部分文本，使得动画看起来更加整洁。
transform: translateX(); 用于移动元素的水平位置。100% 表示从右侧完全不可见的位置开始，-100% 则是移动到左侧完全不可见的位置。
animation 属性用于应用定义好的动画，10s 是动画持续时间，linear 是动画的速度曲线（此处为匀速），infinite 表示动画无限次循环。

使用这种方法，您可以在网页上创建吸引人的横向滚动文字效果，增强视觉动态感并引起用户的注意。

2. 如何实现自定义弹出框

下面是弹出框的样式和相关的 JavaScript 脚本部分介绍。以下是详细的内容：

弹出框样式 (CSS)

这段CSS代码主要用于定义弹出框的视觉样式，包括背景颜色、边框、圆角、阴影等。

.notification-box {
    background-color: #e7f0ff; /* 浅蓝色背景 */
    border: 1px solid #3498db; /* 深蓝色边框 */
    border-radius: 10px; /* 设置圆角 */
    padding: 15px;
    margin-bottom: 20px;
    color: #2980b9; /* 深蓝色文字 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 14px; /* 设置字体大小 */
    line-height: 1.5; /* 设置行高 */
    position: relative; /* 相对定位，为关闭按钮定位做准备 */
}

.close-button {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent; /* 将背景色设置为透明 */
    border: none;
    width: 24px;
    height: 24px;
    font-size: 18px;
    text-align: center;
    line-height: 22px; /* 设置行高，使X居中显示 */
    font-weight: bold;
    color: #999; /* 设置关闭按钮颜色 */
    transition: all 0.3s; /* 添加过渡效果 */
}

.close-button:hover {
    color: #333; /* 设置鼠标悬停时的关闭按钮颜色 */
}

.notification-box.fadeOut {
    animation: slideOutLeft 0.5s forwards;
}

@keyframes slideOutLeft {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(-100%);
    }
}

弹出框脚本 (JavaScript)

这段JavaScript用于处理弹出框的显示和关闭功能，包括创建弹出框、自动关闭和手动关闭功能。

function openNotification(type, title, message, duration) {
    // 创建通知元素
    var notification = document.createElement('div');
    notification.className = 'notification-box';
    // 根据类型添加图标HTML
    var iconHTML = ''; // 这里可以根据type添加不同的图标HTML代码
    notification.innerHTML = `
      ${iconHTML}
      <h2>${title}</h2>
      <p>${message}</p>
      <button class="close-button" οnclick="closeNotification(this)">×</button>
    `;
    
    // 添加到容器
    var container = document.getElementById('notification-container');
    container.appendChild(notification);
  
    // 设置自动关闭
    if (duration > 0) {
      setTimeout(function() {
        closeNotification(notification);
      }, duration);
    }
}

function closeNotification(notification) {
    // 如果notification是button，那么取其parentNode
    if (notification.nodeName === 'BUTTON') {
      notification = notification.parentNode;
    }
    // 开始退场动画
    notification.classList.add('fadeOut');
    // 监听动画结束事件，然后移除通知
    notification.addEventListener('animationend', function() {
      notification.remove();
    });
}

3. 如何实现加油打气

从这个项目代码中，下面是“加油打气”按钮相关的样式和JavaScript脚本介绍。这部分主要用于设置按钮的视觉样式以及定义按钮的点击事件，实现音频播放和更新鼓励语句的功能。

加油打气按钮样式 (CSS)

这部分CSS代码定义了“加油打气”按钮的基本样式和悬停时的变换效果。

.btn-success:hover {
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}

这是一个简单的CSS规则，当用户将鼠标悬停在按钮上时，按钮会略微放大，这增强了用户的交互体验。

加油打气功能的脚本 (JavaScript)

这部分JavaScript代码处理按钮的点击事件，播放一次音频并随机显示一个鼓励语句。

// 播放音频一次
function playSoundOnce(sound) {
    const audio = new Audio(sound);
    audio.play();
}

// 每日一句鼓励的内容列表
const encouragements = [
    "今天的努力，明天的成就！",
    "相信自己，你一定行！",
    "坚持不懈，成功必来！",
    "困难并不可怕，坚持才是关键！"
    // 可以继续添加更多的鼓励语句
];

// 随机获取一句鼓励并更新到页面上
function encourage() {
    const randomIndex = Math.floor(Math.random() * encouragements.length);
    document.getElementById('encouragement').innerText = "每日一句鼓励：" + encouragements[randomIndex];
}

// 按钮点击事件的处理函数，播放音频并显示一个新的鼓励语句
document.querySelector('.btn-success').addEventListener('click', function() {
    encourage(); // 更新鼓励语句
    playSoundOnce('https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/music/046%E6%97%A9%E4%B8%8A%E5%A5%BD%EF%BC%8C%E4%B8%80%E8%B5%B7%E5%8E%BB%E5%AD%A6%E6%A0%A1%E5%90%A7.mp3');
});

4. 如何实现音乐播放功能

在这个项目代码中，"启动"和"停止"音乐的功能被控制通过一个按钮，这个按钮根据音乐的播放状态变化其标签和样式。

音乐控制按钮样式 (CSS)

这部分CSS用于定义音乐控制按钮的基本和动态样式。这包括按钮在默认情况下的样式，以及当音乐播放和停止时的样式变化。

#audio-control {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
}

.btn-primary, .btn-danger {
    transition: background-color 0.3s, transform 0.3s; /* 添加颜色和变形的平滑过渡 */
}

.btn-danger:hover, .btn-primary:hover {
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}

音乐控制功能的脚本 (JavaScript)

这部分JavaScript代码处理音乐的播放和停止功能，以及更新按钮的文本和样式以反映当前的播放状态。

let isAudioPlaying = false; // 初始状态为音频停止播放

// 播放音频
function playSound(sound) {
    const audio = document.getElementById('audio');
    audio.src = sound;
    audio.play();
    isAudioPlaying = true;
    updateAudioControlButton();
}

// 停止音频播放
function stopSound() {
    const audio = document.getElementById('audio');
    audio.pause();
    audio.currentTime = 0; // 重置音频到开头
    isAudioPlaying = false;
    updateAudioControlButton();
}

// 切换音频播放状态
function toggleAudio() {
    if (isAudioPlaying) {
        stopSound();
    } else {
        playSound('https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/music/Kyle%20Xian%20-%20%E3%81%BE%E3%81%A3%E3%81%99%E3%81%90%EF%BC%88%E6%93%85%E9%95%BF%E6%8D%89%E5%BC%84%E7%9A%84%E9%AB%98%E6%9C%A8%E5%90%8C%E5%AD%A6%20%E7%AC%AC%E4%B8%89%E5%AD%A3%20OP%EF%BC%89.mp3'); // 默认播放指定的音乐链接
    }
}

// 更新播放停止按钮文本和样式
function updateAudioControlButton() {
    const audioControlButton = document.getElementById('audio-control');
    if (isAudioPlaying) {
        audioControlButton.textContent = "停止";
        audioControlButton.classList.remove('btn-primary');
        audioControlButton.classList.add('btn-danger');
    } else {
        audioControlButton.textContent = "启动";
        audioControlButton.classList.remove('btn-danger');
        audioControlButton.classList.add('btn-primary');
    }
}

这段代码实现了以下功能：

播放音乐：当音乐未在播放时，点击按钮会启动音乐。
停止音乐：当音乐正在播放时，再次点击按钮会停止音乐。
按钮样式更新：根据音乐的播放状态，更新按钮的文本和样式。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考研加油</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            position: relative;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        .encouragement {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            animation: fadein 2s;
        }
        .question {
            margin-top: 30px;
        }
        .answer {
            margin-top: 20px;
        }
        .navbar {
            background-color: #343a40;
        }
        .encouragement-navbar {
            font-size: 16px;
            color: white;
            animation: slide 10s linear infinite;
        }
        @keyframes slide {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        @keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        /* 按钮点击效果 */
        .btn-success:hover {
            transform: scale(1.1);
        }
        /* 播放停止按钮样式 */
        #audio-control {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 999;
        }


        @keyframes slideOutLeft {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
  
    100% {
      opacity: 0;
      transform: translateX(-100%);
    }
}

.notification-box.fadeOut {
    animation: slideOutLeft 0.5s forwards;
}

#notification-container {
    position: fixed;
    top: 70px;
    left: 10px;
    width: 300px;
  }
  
  .notification-box {
    background-color: #e7f0ff; /* 浅蓝色背景 */
    border: 1px solid #3498db; /* 深蓝色边框 */
    border-radius: 10px; /* 设置圆角 */
    padding: 15px;
    margin-bottom: 20px;
    color: #2980b9; /* 深蓝色文字 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 14px; /* 设置字体大小 */
    line-height: 1.5; /* 设置行高 */
}


  
  .notification-box h2 {
    margin-top: 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }
  
  .notification-box p {
    font-size: 14px;
    margin: 15px 0;
    text-align: center;
  }
  
  .close-button {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent; /* 将背景色设置为透明 */
    border: none;
    width: 24px;
    height: 24px;
    font-size: 18px;
    text-align: center;
    line-height: 22px; /* 设置行高，使X居中显示 */
    font-weight: bold;
    color: #999; /* 设置关闭按钮颜色 */
    transition: all 0.3s; /* 添加过渡效果 */
  }
  
  .close-button:hover {
    color: #333; /* 设置鼠标悬停时的关闭按钮颜色 */
  }
  

    </style>
</head>
<body>
    <!-- 左上角版权信息 -->
<div style="position: fixed; top: 10px; left: 10px; color: #080808; font-size: 12px;">
    Power by elik
</div>

    <!-- 播放停止按钮 -->
    <button id="audio-control" class="btn btn-primary" onclick="toggleAudio()">启动</button>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">考研加油</a>
            <div class="encouragement-navbar ml-auto" id="encouragement-navbar"></div>
        </div>
    </nav>

    <div class="container mt-4">
        <h1 class="text-center mb-4">考研加油</h1>
        
        <!-- 每日一句鼓励 -->
        <div class="encouragement" id="encouragement">每日一句鼓励：今天的努力，明天的成就！</div>

        <!-- 加油按钮 -->
        <div class="text-center">
            <button class="btn btn-success" onclick="encourage(); playSoundOnce('https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/music/046%E6%97%A9%E4%B8%8A%E5%A5%BD%EF%BC%8C%E4%B8%80%E8%B5%B7%E5%8E%BB%E5%AD%A6%E6%A0%A1%E5%90%A7.mp3')">加油打气！</button>
        </div>

        <!-- 问题与回答 -->
        <div class="question">
            <h2 class="text-center mb-4">解惑考研人遇到的心理问题：</h2>
            <ul class="list-group">
                <li class="list-group-item">如何面对压力？ <button class="btn btn-info btn-sm ml-2" onclick="answerQuestion('面对压力')">解答</button></li>
                <li class="list-group-item">如何保持学习的动力？ <button class="btn btn-info btn-sm ml-2" onclick="answerQuestion('保持学习动力')">解答</button></li>
                <li class="list-group-item">如何处理失败与挫折？ <button class="btn btn-info btn-sm ml-2" onclick="answerQuestion('处理失败与挫折')">解答</button></li>
                <li class="list-group-item">如何保持良好的心态？ <button class="btn btn-info btn-sm ml-2" onclick="answerQuestion('保持良好心态')">解答</button></li>
                <!-- 可以继续添加更多的问题 -->
            </ul>
        </div>

        <!-- 回答与安慰 -->
        <div class="answer">
            <h2 class="text-center mb-4">回答与安慰：</h2>
            <div id="answer" class="text-center"></div>
        </div>

        <!-- 输入心仪的大学 -->
        <div class="text-center mt-4">
            <label for="universityInput">心仪的大学：</label>
            <input type="text" id="universityInput" class="form-control w-50 mx-auto" placeholder="请输入您想要考研的大学">
            <button id=myButton class="btn btn-primary mt-2" onclick="updateUniversity()">更新</button>
            <div id="notification-container"></div>
        </div>
        
        <!-- 显示心仪的大学 -->
        <div class="text-center mt-4">
            <h2 id="universityDisplay">心仪的大学：清华大学</h2>
        </div>
    </div>
    

    <!-- layui 弹出框 -->
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
    <script>

    </script>

    <!-- 音频文件 -->
    <audio id="audio" src="https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/music/Kyle%20Xian%20-%20%E3%81%BE%E3%81%A3%E3%81%99%E3%81%90%EF%BC%88%E6%93%85%E9%95%BF%E6%8D%89%E5%BC%84%E7%9A%84%E9%AB%98%E6%9C%A8%E5%90%8C%E5%AD%A6%20%E7%AC%AC%E4%B8%89%E5%AD%A3%20OP%EF%BC%89.mp3" loop></audio>

    <script>
        let isAudioPlaying = false; // 初始状态为音频停止播放

        // 播放按钮点击声音
        function playSound(sound) {
            const audio = document.getElementById('audio');
            audio.src = sound;
            audio.play();
            isAudioPlaying = true;
            updateAudioControlButton();
        }

        // 停止按钮点击声音
        function stopSound() {
            const audio = document.getElementById('audio');
            audio.pause();
            audio.currentTime = 0; // 重置音频到开头
            isAudioPlaying = false;
            updateAudioControlButton();
        }

        // 切换音频播放状态
        function toggleAudio() {
            if (isAudioPlaying) {
                stopSound();
            } else {
                playSound('https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/music/Kyle%20Xian%20-%20%E3%81%BE%E3%81%A3%E3%81%99%E3%81%90%EF%BC%88%E6%93%85%E9%95%BF%E6%8D%89%E5%BC%84%E7%9A%84%E9%AB%98%E6%9C%A8%E5%90%8C%E5%AD%A6%20%E7%AC%AC%E4%B8%89%E5%AD%A3%20OP%EF%BC%89.mp3'); // 默认播放https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/music/Kyle%20Xian%20-%20%E3%81%BE%E3%81%A3%E3%81%99%E3%81%90%EF%BC%88%E6%93%85%E9%95%BF%E6%8D%89%E5%BC%84%E7%9A%84%E9%AB%98%E6%9C%A8%E5%90%8C%E5%AD%A6%20%E7%AC%AC%E4%B8%89%E5%AD%A3%20OP%EF%BC%89.mp3
            }
        }

        // 更新播放停止按钮文本和样式
        function updateAudioControlButton() {
            const audioControlButton = document.getElementById('audio-control');
            if (isAudioPlaying) {
                audioControlButton.textContent = "停止";
                audioControlButton.classList.remove('btn-primary');
                audioControlButton.classList.add('btn-danger');
            } else {
                audioControlButton.textContent = "启动";
                audioControlButton.classList.remove('btn-danger');
                audioControlButton.classList.add('btn-primary');
            }
        }

        // 播放音频一次
        function playSoundOnce(sound) {
            const audio = new Audio(sound);
            audio.play();
        }

        // 每日一句鼓励的内容列表
        const encouragements = [
            "今天的努力，明天的成就！",
            "相信自己，你一定行！",
            "坚持不懈，成功必来！",
            "困难并不可怕，坚持才是关键！"
            // 可以继续添加更多的鼓励语句
        ];

        // 随机获取一句鼓励并更新到页面上
        function encourage() {
            const randomIndex = Math.floor(Math.random() * encouragements.length);
            document.getElementById('encouragement').innerText = "每日一句鼓励：" + encouragements[randomIndex];
        }

        // 随机获取一句鼓励并更新到顶部导航栏
        function encourageNavbar() {
            const randomIndex = Math.floor(Math.random() * encouragements.length);
            document.getElementById('encouragement-navbar').innerText = "每日一句鼓励：" + encouragements[randomIndex];
        }

        // 回答问题与安慰
        function answerQuestion(question) {
            let answer = '';
            switch (question) {
                case '面对压力':
                    answer = '面对压力时，可以尝试分解任务，制定合理的学习计划，并适当放松自己，保持良好的心态。';
                    break;
                case '保持学习动力':
                    answer = '保持学习动力的方法有很多，可以和同学、朋友一起学习，定期休息放松，也可以设立目标，不断给自己激励。';
                    break;
                case '处理失败与挫折':
                    answer = '处理失败与挫折时，可以先冷静下来，分析失败的原因，并吸取教训，调整自己的学习方法和态度，相信自己，勇敢面对挑战。';
                    break;
                case '保持良好心态':
                    answer = '保持良好心态很重要，可以通过健康的生活方式、积极的心理建设以及合理的时间规划来调整心态，时刻保持乐观向上的心态。';
                    break;
                default:
                    answer = '抱歉，暂时无法回答您的问题。';
            }
            document.getElementById('answer').innerHTML = `<p>${question}的解答：${answer}</p><p>加油，你一定能行！</p>`;
        }

        // 每隔一段时间更新顶部导航栏的鼓励语句
        setInterval(encourageNavbar, 10000); // 10秒切换一次鼓励语句
        encourageNavbar(); // 页面加载时初始化一次

        // 更新用户输入的大学名称
        function updateUniversity() {
            const universityInput = document.getElementById('universityInput').value;
            localStorage.setItem('preferredUniversity', universityInput);
            document.getElementById('universityDisplay').innerText = "心仪的大学：" + universityInput;
            updateUniversityShow();
        }

        // 页面加载时检查本地存储中是否有保存的大学名称
        window.onload = function() {
            const preferredUniversity = localStorage.getItem('preferredUniversity');
            if (preferredUniversity) {
                document.getElementById('universityDisplay').innerText = "心仪的大学：" + preferredUniversity;
                document.getElementById('universityInput').value = preferredUniversity;
            }

        layui.use('layer', function(){
            var layer = layui.layer;
            var preferredUniversity = document.getElementById('universityDisplay').innerText.split('：')[1];
            layer.open({
                type: 1,
                title: false,
                closeBtn: false,
                shadeClose: true,
                area: '300px',
                offset: 'rb',
                content: '<div style="padding: 20px; background-color: #393D49; color: #fff;">心仪的大学：' + preferredUniversity + '</div>'
            });
        });
        }

function updateUniversityShow() {
    // 这里可以添加具体的更新逻辑，比如发送请求到服务器更新数据
    var userInput = document.getElementById('universityInput').value;
    // 更新成功后，显示通知
    openNotification('success', '祝福', '更新为 ' + userInput + ' 成功，加油喔！', 1000); // 0 代表不自动关闭弹出框
}


// 打开一个通知
function openNotification(type, title, message, duration) {
    // 创建通知元素
    var notification = document.createElement('div');
    notification.className = 'notification-box';
    // 根据类型添加图标HTML
    var iconHTML = '';
    notification.innerHTML = `
      ${iconHTML}
      <h2>${title}</h2>
      <p>${message}</p>
      <button class="close-button" onclick="closeNotification(this)">×</button>
    `;
    
    // 添加到容器
    var container = document.getElementById('notification-container');
    container.appendChild(notification);
  
    // 设置自动关闭
    if (duration > 0) {
      setTimeout(function() {
        closeNotification(notification);
      }, duration);
    }
  }
  
  // 关闭一个通知
  function closeNotification(notification) {
    // 如果notification是button，那么取其parentNode
    if (notification.nodeName === 'BUTTON') {
      notification = notification.parentNode;
    }
    // 开始退场动画
    notification.classList.add('fadeOut');
    // 监听动画结束事件，然后移除通知
    notification.addEventListener('animationend', function() {
      notification.remove();
    });
  }


  
  
    </script>
</body>
</html>