输入双方生肖，生成趣味配对结果，增加用户互动性：
<!-- 生肖配对测试 - 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>所有代码的使用方法
- 登录 Emlog 后台 → 外观 → 侧边栏设置
- 点击「添加自定义组件」，粘贴上面任意一段完整代码
发表评论