2024.4.29（结组第9天）

代码量：50行左右（因为是在原本代码的基础上进行增加了几个css样式，在jsp代码里对盒子标签加入了一个class属性，并通过增加JavaScript代码来做到点击右上角导航栏来切出此试图的效果）

今天给他们看了现在的一个大致效果，他们感觉都挺不错的，但我发现了一个问题，我对于背景的图片选择不太好，现在的这张图片是以充满科技感的蓝色白色相间来展现的，这就导致我如果使用浅色字体会容易看不清，深色字体更是达到了看不见的地步，而其他的字体颜色，例如使用哪些红色，黄色，蓝色等会发现特别难看。。。所以我决定在整个页面中加入一个算半透明的白框，在这里面放后续加入的所有东西，下面是效果展示：

 相关的css代码和JavaScript代码都在前面的博客园进行了刷新，现在展示的是对于右上角“首页”、“网络安全”、“人文科技”和“心理健康的相关JavaScript代码函数的展示：

function changePage(pagename){
    var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
    xhr.open("GET", "hello-servlet1", true);  // 设置HTTP请求方式和Servlet的URL
    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status == 200) {
          var response = xhr.responseText;  // 获取Servlet的响应数据
          var sessionValues = response.sessionValue; // 获取Session值

          console.log("Session 中的值为: " + sessionValues);
        } else {
          // 请求失败
          console.error('请求失败：' + xhr.status);
        }
      }
    };
    xhr.send();  // 发送HTTP请求到Servlet
    var i,page;
    page=document.getElementsByClassName("page");
    for(i=0;i<page.length;i++){
      page[i].style.display="none";
    }
    wrapper.style.display="none";
    document.getElementById("wrapp").style.display="block";
    document.getElementById(pagename).style.display="block";
  }
  function wr(){
    var i,page;
    document.getElementById("wrapp").style.display="none";
    // var wrapper=document.getElementById("wrapper");
    page=document.getElementsByClassName("page");
    for(i=0;i<page.length;i++){
      page[i].style.display="none";
    }
    wrapper.style.display="flex";
  }