Emlog博客侧边栏趣味生肖配对测试代码

输入双方生肖，生成趣味配对结果，增加用户互动性：

<!-- 生肖配对测试 - Emlog侧边栏 --> <div style="background: linear-gradient(135deg, #fdf2f8 0%, #fef7fb 100%); border-radius: 8px; padding: 20px; margin-bottom: 20px; border: 1px solid #f0d5e0;"> <h3 style="color: #e53e3e; font-size: 18px; margin: 0 0 15px 0; text-align: center; font-weight: 600;"> <i class="fas fa-heart" style="margin-right: 8px;"></i>生肖配对测试 </h3> <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;"> <div style="flex: 1; min-width: 120px;"> <label style="font-size: 13px; color: #666; display: block; margin-bottom: 4px;">你的生肖</label> <select id="zodiac1" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"> <option value="鼠">鼠</option><option value="牛">牛</option><option value="虎">虎</option><option value="兔">兔</option> <option value="龙">龙</option><option value="蛇">蛇</option><option value="马">马</option><option value="羊">羊</option> <option value="猴">猴</option><option value="鸡">鸡</option><option value="狗">狗</option><option value="猪">猪</option> </select> </div> <div style="flex: 1; min-width: 120px;"> <label style="font-size: 13px; color: #666; display: block; margin-bottom: 4px;">对方生肖</label> <select id="zodiac2" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"> <option value="鼠">鼠</option><option value="牛">牛</option><option value="虎">虎</option><option value="兔">兔</option> <option value="龙">龙</option><option value="蛇">蛇</option><option value="马">马</option><option value="羊">羊</option> <option value="猴">猴</option><option value="鸡">鸡</option><option value="狗">狗</option><option value="猪">猪</option> </select> </div> </div> <button id="checkZodiac" style="width: 100%; background: #e53e3e; color: #fff; border: none; padding: 8px; border-radius: 4px; font-size: 14px; cursor: pointer;"> <i class="fas fa-magic"></i> 测试配对指数 </button> <div id="zodiacResult" style="margin-top: 15px; padding: 12px; border-radius: 6px; background: #fff; font-size: 14px; color: #666; line-height: 1.6;"> 点击按钮开始测试～ </div> </div> <script> // 生肖配对数据（趣味娱乐为主） const zodiacPairs = { '鼠-牛': '配对指数：90分\n默契十足，互相扶持，是稳定长久的组合～', '鼠-虎': '配对指数：70分\n性格互补，但需多沟通包容，才能走得更远～', '鼠-兔': '配对指数：85分\n温柔相伴，生活平淡却温馨，幸福感满满～', '牛-虎': '配对指数：75分\n强强联合，目标一致，但偶尔会因固执产生摩擦～', '龙-凤': '配对指数：95分\n天生一对，才华互补，事业爱情双丰收～', '龙-蛇': '配对指数：88分\n神秘吸引，互相欣赏，是灵魂契合的伴侣～', '马-羊': '配对指数：92分\n温柔以待，互相理解，生活充满诗意～', '猴-鸡': '配对指数：80分\n活泼有趣，一起探索新鲜事物，从不无聊～', '狗-猪': '配对指数：86分\n真诚相待，互相守护，是值得托付的组合～', }; // 默认配对结果（未匹配到的组合） function getDefaultResult(z1, z2) { const score = Math.floor(Math.random() * 20) + 70; // 70-90分随机 const remarks = [ '缘分天定，互相珍惜，就能收获美好～', '性格合拍，多些耐心，会越来越幸福～', '彼此吸引，共同成长，是不错的组合～', ]; return `配对指数：${score}分\n${remarks[Math.floor(Math.random() * remarks.length)]}`; } // 测试按钮点击事件 document.getElementById('checkZodiac').addEventListener('click', () => { const z1 = document.getElementById('zodiac1').value; const z2 = document.getElementById('zodiac2').value; const key1 = `${z1}-${z2}`; const key2 = `${z2}-${z1}`; const result = zodiacPairs[key1] || zodiacPairs[key2] || getDefaultResult(z1, z2); // 换行转br document.getElementById('zodiacResult').innerHTML = result.replace(/\n/g, '<br>'); }); </script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> #checkZodiac:hover { background: #c53030; transition: background 0.3s; } #zodiacResult { border: 1px solid #fce4ec; } </style>

所有代码的使用方法

1. 登录 Emlog 后台 → 外观 → 侧边栏设置
2. 点击「添加自定义组件」，粘贴上面任意一段完整代码