增加了一个像素点之间液化连接视觉测试功能
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: black;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 使 body 高度为视口高度 */
        margin: 0; /* 去除默认的 margin */
      }
      .matrix {
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        padding: 5px;
        filter: contrast(500%);
      }
      .row {
        display: flex;
      }
      .cell {
        width: 20px; /* 每个单元格的宽度 */
        height: 20px; /* 每个单元格的高度 */
        display: flex;
        align-items: center;
        justify-content: center;
        border: none; /* 单元格边框 */
        margin: 0; /* 单元格间距 */
        filter: blur(10px); /* 默认模糊效果 */
        transition: filter 0.3s ease; /* 过渡效果 */
      }
      .cell.true {
        background-color: rgb(255, 255, 255); /* 1 的背景色 */
      }
      .cell.false {
        background-color: rgb(0, 0, 0); /* 0 的背景色 */
      }
      .slider-container {
        margin-top: 20px; /* 滑动框与矩阵的间距 */
      }
      .input-container {
        margin-bottom: 20px; /* 输入框与滑动框的间距 */
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <label for="wordInput">输入单词: </label>
      <input type="text" id="wordInput" value="d2learn" />
      <button id="lookUpButton">查询</button>
    </div>
    <div class="slider-container">
      <label for="blurRange">调整模糊程度: </label>
      <input type="range" id="blurRange" min="0" max="50" value="10" />
    </div>
    <div class="slider-container">
      <label for="contrastRange">调整对比度: </label>
      <input type="range" id="contrastRange" min="100" max="5000" value="500" />
    </div>
    <script>
      function charToAsciiBinaryArray(char) {
        const asciiCode = char.charCodeAt(0);
        const binaryString = asciiCode.toString(2).padStart(8, "0");
        return Array.from(binaryString, (bit) => bit === "1");
      }

      function stringToBinaryArrays(str) {
        return str.split("").map(charToAsciiBinaryArray);
      }

      function updateMatrix(word) {
        const d2learnBinaryArray = stringToBinaryArrays(word);

        // 清空矩阵内容
        matrixContainer.innerHTML = "";

        // 创建新的矩阵并添加到 body 中
        d2learnBinaryArray.forEach((row) => {
          const rowDiv = document.createElement("div");
          rowDiv.className = "row";
          row.forEach((cell) => {
            const cellDiv = document.createElement("div");
            cellDiv.className = "cell " + (cell ? "true" : "false");
            rowDiv.appendChild(cellDiv);
          });
          matrixContainer.appendChild(rowDiv);
        });
      }

      const matrixContainer = document.createElement("div");
      matrixContainer.className = "matrix";
      document.body.appendChild(matrixContainer);

      // 初始化默认显示 "d2learn" 的矩阵
      updateMatrix("d2learn");

      // 处理输入框和查询按钮的事件
      const lookUpButton = document.getElementById("lookUpButton");
      lookUpButton.addEventListener("click", () => {
        const word = document.getElementById("wordInput").value; // 获取输入的单词
        updateMatrix(word); // 更新矩阵
      });

      // 处理模糊度滑动框的输入事件
      const blurRange = document.getElementById("blurRange");
      blurRange.addEventListener("input", () => {
        const blurValue = blurRange.value; // 获取当前的滑动值
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => {
          cell.style.filter = `blur(${blurValue}px)`; // 设置模糊效果
        });
      });

      // 处理对比度滑动框的输入事件
      const contrastRange = document.getElementById("contrastRange");
      contrastRange.addEventListener("input", () => {
        const contrastValue = contrastRange.value; // 获取当前的滑动值
        matrixContainer.style.filter = `contrast(${contrastValue}%)`; // 设置对比度效果
      });

      console.log(d2learnBinaryArray);
    </script>
  </body>
</html>
D2Learn Forums

Littlefean
