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

2025/11/21 小玖云技术分享 115 0

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

<!-- 生肖配对测试 - 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>