2024.5.15

学习时长：3h

代码量：131行

博客园数：1篇

所学知识：今天在哔哩哔哩上发现了一种比较好玩的css效果，是九张不同颜色的卡片，原本是叠放在一起，当鼠标放置到上面后这九张卡片会分散开，我觉得这是一个很不错的形式，可以放在网络安全部分作为题目的选择，所以我借鉴了一下，然后在这基础上我进行了颜色，大小，放置位置，以及卡片上内容的更改，在最初我选择在卡片的上面放置一个按钮，来让用户点击按钮开始答题，后来我发现按钮若单独设置颜色会显得不好看，而将按钮背景色设置为透明又会可能会出现不知道按钮大小而导致点击不到按钮的情况，所以我后来决定将按钮所对应的点击事件直接放置到卡片本身的div标签上，但我并不知道div标签是否可以设置点击事件，于是我进行了尝试和bug修复，后来成功运行；但在此基础上我又发现了新的bug，就是每一张卡片上的题目都一样，并且我重新点击卡片后，后端代码进行了题目更新，但是前端代码并没有进行更新，就导致前端的问题也没有更新，后来在不断探索办法的过程中，我决定使用JavaScript代码中的document.getElementById().innerHTML来解决问题，最终JavaScript函数的代码如下：

function q1(){
    var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
    xhr.open("GET", "http://82.157.199.4:8080/three/HelloServlet", true);  // 设置HTTP请求方式和Servlet的URL
    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status == 200) {
          var response = xhr.responseText;  // 获取Servlet的响应数据
          console.log("从服务器获取的值："+response);

          const overlay=document.getElementById('overlay');
          const popup=document.getElementById('popup');
          overlay.style.display='block';
          popup.style.display='block';

          const labelElement = document.getElementById('propro');
          labelElement.innerHTML="问题:"+response;

          const labelElement2 = document.getElementById('tanswer');
          labelElement2.value="";

          var sessionValues = response.sessionValue; // 获取Session值
        } else {
          // 请求失败
          console.error('请求失败：' + xhr.status);
        }
      }
    };
    xhr.send();
  }

九张卡片对应的前端html代码：

<div id="h1" class="page" style="display: none">
    <div id="qtext2" style="color: #fdfcfc;font-size: 40px">请选择其中一张卡片并完成题目</div>
    <div id="tcontainer" class="container">
      <div class="card" onclick="q1()" style="--i:-4">1</div>
      <div class="card" onclick="q1()" style="--i:-3">2</div>
      <div class="card" onclick="q1()" style="--i:-2">3</div>
      <div class="card" onclick="q1()" style="--i:-1">4</div>
      <div class="card" onclick="q1()" style="--i:0">5</div>
      <div class="card" onclick="q1()" style="--i:1">6</div>
      <div class="card" onclick="q1()" style="--i:2">7</div>
      <div class="card" onclick="q1()" style="--i:3">8</div>
      <div class="card" onclick="q1()" style="--i:4">9</div>
    </div>
    <div id="result2"  style="color: #fdfcfc;font-size: 20px"></div>
  </div>

css代码：

.container .card{
      position: absolute;
      width: 200px;
      height: 300px;
      background-color: #07f1f1;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(0,0,0,0);
      font-size: 8em;
      font-weight: 700;
      border: 10px solid rgba(0,0,0,.1);
      transition: .5s;
      transform-origin: 50% 100%;
      filter: hue-rotate(calc(var(--i) * 30deg));
      box-shadow: 0 15px 50px rgba(0,0,0,.1);
    }
    .container:hover .card:not(:active){
      transform: rotate(calc(var(--i)*5deg))
      translate(calc(var(--i)*120px),-100px);
      box-shadow: 0 15px 50px rgba(0,0,0,.25);
      color: rgba(0,0,0,.25);

      cursor: pointer;
    }
    .container:active .card:not(:active){
      background-color: #333;
    }
    .container:hover .card:hover,.card:active{
      transform: rotate(calc(var(--i)*5deg))
                translate(calc(var(--i)*120px),-100px);
      filter: hue-rotate(calc(var(--i) * 30deg));
      translate: calc(var(--i)*20px) -50px;
      z-index: 999;
    }