如何利用HYML的DIV+JS 利用繪製出 易經 64掛的圖形
如何利用HYML的DIV+JS 利用繪製出 易經 64掛的圖形
資料來源:chatgpt
未註解程式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>易經 64 卦</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #f4f4f4;
}
.gua-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 900px;
gap: 20px;
}
.gua {
width: 100px;
padding: 10px;
text-align: center;
background: white;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.gua-name {
font-size: 14px;
margin-top: 5px;
}
.yao {
width: 60px;
height: 10px;
margin: 5px auto;
background-color: black;
position: relative;
}
.yin::before {
content: "";
position: absolute;
width: 20px;
height: 10px;
background-color: white;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="gua-container" id="guaContainer"></div>
<script>
const guaNames = [
"乾", "坤", "屯", "蒙", "需", "訟", "師", "比", "小畜", "履", "泰", "否", "同人", "大有", "謙", "豫",
"隨", "蠱", "臨", "觀", "噬嗑", "賁", "剝", "復", "無妄", "大畜", "頤", "大過", "坎", "離", "咸", "恆",
"遯", "大壯", "晉", "明夷", "家人", "睽", "蹇", "解", "損", "益", "夬", "姤", "萃", "升", "困", "井",
"革", "鼎", "震", "艮", "漸", "歸妹", "豐", "旅", "巽", "兌", "渙", "節", "中孚", "小過", "既濟", "未濟"
];
function generateGua(number) {
let gua = document.createElement("div");
gua.className = "gua";
let binary = number.toString(2).padStart(6, '0');
for (let i = 5; i >= 0; i--) {
let yao = document.createElement("div");
yao.className = "yao";
if (binary[i] === '0') {
yao.classList.add("yin");
}
gua.appendChild(yao);
}
let guaName = document.createElement("div");
guaName.className = "gua-name";
guaName.innerText = guaNames[number];
gua.appendChild(guaName);
return gua;
}
function render64Gua() {
const guaContainer = document.getElementById("guaContainer");
for (let i = 0; i < 64; i++) {
guaContainer.appendChild(generateGua(i));
}
}
render64Gua();
</script>
</body>
</html>
加上註解程式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>易經 64 卦</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #f4f4f4;
}
.gua-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 900px;
gap: 20px;
}
.gua {
width: 100px;
padding: 10px;
text-align: center;
background: white;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.gua-name {
font-size: 14px;
margin-top: 5px;
}
.yao {
width: 60px;
height: 10px;
margin: 5px auto;
background-color: black;
position: relative;
}
.yin::before {
content: "";
position: absolute;
width: 20px;
height: 10px;
background-color: white;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="gua-container" id="guaContainer"></div>
<script>
const guaNames = [
"乾", "坤", "屯", "蒙", "需", "訟", "師", "比", "小畜", "履", "泰", "否", "同人", "大有", "謙", "豫",
"隨", "蠱", "臨", "觀", "噬嗑", "賁", "剝", "復", "無妄", "大畜", "頤", "大過", "坎", "離", "咸", "恆",
"遯", "大壯", "晉", "明夷", "家人", "睽", "蹇", "解", "損", "益", "夬", "姤", "萃", "升", "困", "井",
"革", "鼎", "震", "艮", "漸", "歸妹", "豐", "旅", "巽", "兌", "渙", "節", "中孚", "小過", "既濟", "未濟"
];
function generateGua(number) {
let gua = document.createElement("div");
gua.className = "gua";
let binary = number.toString(2).padStart(6, '0');
for (let i = 5; i >= 0; i--) {
let yao = document.createElement("div");
yao.className = "yao";
if (binary[i] === '0') {
yao.classList.add("yin");
}
gua.appendChild(yao);
}
let guaName = document.createElement("div");
guaName.className = "gua-name";
guaName.innerText = guaNames[number];
gua.appendChild(guaName);
return gua;
}
function render64Gua() {
const guaContainer = document.getElementById("guaContainer");
for (let i = 0; i < 64; i++) {
guaContainer.appendChild(generateGua(i));
}
}
render64Gua();
</script>
</body>
</html>