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