Spaces:
Running
Running
| document.getElementById('divinate-btn').addEventListener('click', function() { | |
| // 清空上一卦 | |
| document.getElementById('gua-display').innerHTML = ''; | |
| document.getElementById('interpretation').innerHTML = ''; | |
| // 生成六爻(随机阴阳) | |
| const lines = []; | |
| for (let i = 0; i < 6; i++) { | |
| lines.push(Math.random() < 0.5 ? 'yin' : 'yang'); // 随机阴阳 | |
| } | |
| // 显示卦象动画(逐线淡入) | |
| lines.forEach((line, index) => { | |
| setTimeout(() => { | |
| const lineElem = document.createElement('div'); | |
| lineElem.classList.add('line'); | |
| if (line === 'yin') { | |
| lineElem.classList.add('broken'); | |
| } | |
| document.getElementById('gua-display').appendChild(lineElem); | |
| }, index * 300); // 每300ms显示一爻 | |
| }); | |
| // 计算卦象索引(简化:将阴阳转为二进制,0-63) | |
| const guaIndex = parseInt(lines.map(l => l === 'yang' ? '1' : '0').join(''), 2) % 64; | |
| // 预定义64卦的部分示例解读(实际可扩展所有64卦,这里简化为8个循环使用) | |
| const interpretations = [ | |
| { name: '乾卦 ☰☰☰', health: '身体强健,注意休息。', career: '事业顺利,保持专注。', psychology: '内心坚定,积极面对。' }, | |
| { name: '坤卦 ☷☷☷', health: '调养身心,避免劳累。', career: '稳扎稳打,积累力量。', psychology: '包容变化,顺其自然。' }, | |
| { name: '屯卦 ☵☳☰', health: '注意饮食,预防小病。', career: '初创阶段,坚持努力。', psychology: '克服困难,成长自我。' }, | |
| { name: '蒙卦 ☶☵☷', health: '保持运动,增强体质。', career: '学习新知,提升技能。', psychology: '求知若渴,启迪心灵。' }, | |
| { name: '需卦 ☵☰☷', health: '耐心调理,恢复活力。', career: '等待时机,准备充分。', psychology: '冷静思考,避免冲动。' }, | |
| { name: '讼卦 ☰☵☰', health: '缓解压力,放松身心。', career: '沟通协调,化解冲突。', psychology: '理性表达,寻求和谐。' }, | |
| { name: '师卦 ☷☵☷', health: '团队合作,共享健康。', career: '领导组织,高效执行。', psychology: '集体智慧,互助成长。' }, | |
| { name: '比卦 ☵☷☵', health: '互助支持,共同养生。', career: '合作共赢,拓展网络。', psychology: '亲近他人,温暖心灵。' } | |
| // 添加更多卦象... | |
| ]; | |
| // 显示解读(动画完成后) | |
| setTimeout(() => { | |
| const interp = interpretations[guaIndex % 8]; // 循环使用示例 | |
| const interpElem = document.getElementById('interpretation'); | |
| interpElem.innerHTML = ` | |
| <h2>${interp.name}</h2> | |
| <p><strong>健康:</strong> ${interp.health}</p> | |
| <p><strong>事业:</strong> ${interp.career}</p> | |
| <p><strong>心理:</strong> ${interp.psychology}</p> | |
| `; | |
| }, 6 * 300 + 500); // 所有爻显示后500ms | |
| }); |