console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻方互动探究网页</title>
<style>
body { font-family: 'Microsoft YaHei', sans-serif; background-color: #f4f7f6; display: flex; flex-direction: column; align-items: center; padding: 20px; }
h1 { color: #2c3e50; }
.container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; max-width: 500px; width: 100%; }
.grid { display: grid; grid-template-columns: repeat(3, 80px); gap: 10px; justify-content: center; margin-bottom: 20px; }
input { width: 80px; height: 80px; font-size: 32px; text-align: center; border: 2px solid #bdc3c7; border-radius: 8px; outline: none; transition: 0.3s; }
input:focus { border-color: #3498db; }
.valid { background-color: #d4edda; border-color: #28a745; color: #155724; }
.invalid { background-color: #f8d7da; border-color: #dc3545; color: #721c24; }
.controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: white; transition: 0.3s; }
.btn-verify { background-color: #28a745; }
.btn-verify:hover { background-color: #218838; }
.btn-random { background-color: #007bff; }
.btn-random:hover { background-color: #0069d9; }
.btn-clear { background-color: #6c757d; }
.btn-clear:hover { background-color: #5a6268; }
.feedback { text-align: left; background: #e9ecef; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 15px; line-height: 1.6; }
.highlight { font-weight: bold; color: #d35400; }
</style>
</head>
<body>
<div class="container">
<h1>�� 三阶幻方探究工具</h1>
<p>在九宫格中填入数字，或者点击“随机生成”观察规律。</p>
<div class="grid" id="magicGrid">
<!-- 9个输入框 -->
<input type="number" id="cell-0" min="1"><input type="number" id="cell-1" min="1"><input type="number" id="cell-2" min="1">
<input type="number" id="cell-3" min="1"><input type="number" id="cell-4" min="1"><input type="number" id="cell-5" min="1">
<input type="number" id="cell-6" min="1"><input type="number" id="cell-7" min="1"><input type="number" id="cell-8" min="1">
</div>
<div class="controls">
<button class="btn-verify" onclick="verifySquare()">实时验证</button>
<button class="btn-random" onclick="generateRandom()">随机生成</button>
<button class="btn-clear" onclick="clearGrid()">清空填数</button>
</div>
<div class="feedback" id="feedbackBox">
等待操作... 点击“验证”查看幻和，或观察中心数的关系。
</div>
</div>
<script>
// 洛书的基本形态及8种同构变形
const baseSquare = [8, 1, 6, 3, 5, 7, 4, 9, 2];
const transformations = [
[0, 1, 2, 3, 4, 5, 6, 7, 8], // 原图
[6, 3, 0, 7, 4, 1, 8, 5, 2], // 顺时针90
[8, 7, 6, 5, 4, 3, 2, 1, 0], // 顺时针180
[2, 5, 8, 1, 4, 7, 0, 3, 6], // 顺时针270
[2, 1, 0, 5, 4, 3, 8, 7, 6], // 左右翻转
[6, 7, 8, 3, 4, 5, 0, 1, 2], // 上下翻转
[0, 3, 6, 1, 4, 7, 2, 5, 8], // 主对角线翻转
[8, 5, 2, 7, 4, 1, 6, 3, 0] // 副对角线翻转
];
function getCells() {
let cells = [];
for (let i = 0; i < 9; i++) {
cells.push(parseInt(document.getElementById(`cell-${i}`).value) || 0);
}
return cells;
}
function verifySquare() {
const c = getCells();
const sums = [
c[0]+c[1]+c[2], c[3]+c[4]+c[5], c[6]+c[7]+c[8], // 行
c[0]+c[3]+c[6], c[1]+c[4]+c[7], c[2]+c[5]+c[8], // 列
c[0]+c[4]+c[8], c[2]+c[4]+c[6] // 对角线
];
let isMagic = true;
let targetSum = sums[0];
let totalSum = c.reduce((a, b) => a + b, 0);
let centerVal = c[4];
// 检查是否有空值或0
if (c.includes(0)) {
document.getElementById('feedbackBox').innerHTML = "<span style='color:red;'>⚠️ 请填满所有格子后再验证哦！</span>";
return;
}
for (let s of sums) {
if (s !== targetSum) { isMagic = false; break; }
}
let inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.classList.remove('valid', 'invalid');
input.classList.add(isMagic ? 'valid' : 'invalid');
});
let feedbackHTML = `
<div>当前各条线的和为：<span class="highlight">${targetSum}</span> (如果所有线相等，则为幻和)</div>
<hr style="border: 0.5px solid #ccc; margin: 10px 0;">
<div>�� <b>规律观察区：</b></div>
<div>所有数字总和 ÷ 3 = ${totalSum} ÷ 3 = <span class="highlight">${(totalSum/3).toFixed(0)}</span></div>
<div>中心数 × 3 = ${centerVal} × 3 = <span class="highlight">${centerVal * 3}</span></div>
`;
if (isMagic) {
feedbackHTML = `<div style="color:#155724; font-weight:bold; margin-bottom:5px;">✅ 恭喜！这是一个完美的幻方！</div>` + feedbackHTML;
} else {
feedbackHTML = `<div style="color:#721c24; font-weight:bold; margin-bottom:5px;">❌ 哎呀，行、列或对角线的和不全相等，再试一次吧！</div>` + feedbackHTML;
}
document.getElementById('feedbackBox').innerHTML = feedbackHTML;
}
function generateRandom() {
let randomIndex = Math.floor(Math.random() * transformations.length);
let transform = transformations[randomIndex];
for (let i = 0; i < 9; i++) {
document.getElementById(`cell-${i}`).value = baseSquare[transform[i]];
}
// 移除红绿背景
let inputs = document.querySelectorAll('input');
inputs.forEach(input => input.classList.remove('valid', 'invalid'));
verifySquare();
}
function clearGrid() {
for (let i = 0; i < 9; i++) {
document.getElementById(`cell-${i}`).value = '';
document.getElementById(`cell-${i}`).classList.remove('valid', 'invalid');
}
document.getElementById('feedbackBox').innerHTML = "已清空，请填入新的数字开始探究。";
}
</script>
</body>
</html>