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 = `

${interp.name}

健康: ${interp.health}

事业: ${interp.career}

心理: ${interp.psychology}

`; }, 6 * 300 + 500); // 所有爻显示后500ms });