增加了一个像素点之间液化连接视觉测试功能
<!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>