4.6测试-CSDN博客

本文链接：https://blog.csdn.net/2501_91180145/article/details/147027307
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星座运势与MBTI测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #f8f9fa; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .section { margin-bottom: 30px; }
        h1 { color: #333; text-align: center; margin-bottom: 30px; }
        h2 { color: #555; margin-bottom: 15px; }
        label { display: block; margin: 10px 0 5px; color: #666; }
        select, input { padding: 10px; width: 100%; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; }
        button:hover { background: #0056b3; }
        .result { margin-top: 20px; padding: 20px; background: #f1f1f1; border-radius: 5px; }
        .question { margin-bottom: 15px; }
        .question label { display: inline-block; margin-left: 10px; }
        
        <style>
            /* 新增样式 */
            .date-display {
                text-align: center;
                color: #666;
                margin-bottom: 20px;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .animated {
                animation: fadeIn 0.5s ease-in-out;
            }
            .loader {
                border: 4px solid #f3f3f3;
                border-top: 4px solid #3498db;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                animation: spin 1s linear infinite;
                margin: 20px auto;
                display: none;
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
    </style>
</head>
<body>
    <div class="container">
        <h1>星座运势与MBTI测试</h1>
        <div class="date-display" id="currentDate"></div>  <!-- 新增日期显示 -->

        <!-- 星座运势部分 -->
        <div class="section">
            <h2>星座运势</h2>
            <label for="zodiac">选择你的星座：</label>
            <select id="zodiac">
                <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>
            <button onclick="getFortune()">查看今日运势</button>
            <div class="result" id="fortuneResult"></div>
        </div>

        <!-- MBTI测试部分 -->
        <div class="section">
            <h2>MBTI性格测试</h2>
            <form id="mbtiForm">
                <div class="question">
                    <input type="radio" name="q1" value="E"> <label>我喜欢参加社交活动</label>
                    <input type="radio" name="q1" value="I"> <label>我更喜欢独处或小团体</label>
                </div>
                <div class="question">
                    <input type="radio" name="q2" value="S"> <label>我关注现实和具体细节</label>
                    <input type="radio" name="q2" value="N"> <label>我更关注未来和可能性</label>
                </div>
                <div class="question">
                    <input type="radio" name="q3" value="T"> <label>我做决定时更注重逻辑</label>
                    <input type="radio" name="q3" value="F"> <label>我做决定时更注重情感</label>
                </div>
                <div class="question">
                    <input type="radio" name="q4" value="J"> <label>我喜欢有计划和组织</label>
                    <input type="radio" name="q4" value="P"> <label>我喜欢灵活和随性</label>
                </div>
            </form>
            <button onclick="calculateMBTI()">获取我的MBTI</button>
            <div class="loader" id="mbtiLoader"></div>  <!-- 新增加载动画 -->
            <div class="result animated" id="mbtiResult"></div>
        </div>
    </div>

    <script>
        // 新增日期显示
        const dateDisplay = document.getElementById('currentDate');
        const today = new Date();
        dateDisplay.textContent = `今天是：${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`;

        // MBTI类型描述
        const mbtiDescriptions = {
            "INTJ": "战略家：富有想象力和战略性的思想家，一切皆在计划之中。",
            "INTP": "逻辑学家：具有创造力的发明家，对知识有着不知疲倦的渴望。",
            "ENTJ": "指挥官：大胆、富有想象力和意志强大的领导者，总能找到或创造解决方法。",
            "ENTP": "辩论家：聪明好奇的思想者，不会放弃任何智力上的挑战。",
            "INFJ": "提倡者：安静而神秘，同时鼓舞人心且不知疲倦的理想主义者。",
            "INFP": "调停者：诗意、善良的利他主义者，总是热情地支持正当的理由。",
            "ENFJ": "主人公：富有魅力、鼓舞人心的领导者，能够吸引听众。",
            "ENFP": "竞选者：热情、有创造力、社交自由的人，总能找到理由微笑。",
            "ISTJ": "检查员：实际且注重事实的个人，其可靠性不容置疑。",
            "ISFJ": "守护者：非常专注和温暖的守护者，时刻准备保护所爱之人。",
            "ESTJ": "总经理：出色的管理者，在管理事情或人员方面无与伦比。",
            "ESFJ": "执政官：极有同情心、受欢迎的合作者，总是热心提供帮助。",
            "ISTP": "鉴赏家：大胆而实际的实验家，擅长使用任何工具。",
            "ISFP": "探险家：灵活且有魅力的艺术家，随时准备探索和体验新事物。",
            "ESTP": "企业家：聪明、精力充沛、善于感知，真正享受生活在边缘。",
            "ESFP": "表演者：自发、精力充沛且热情的表演者，生活在他们周围永远不会无聊。"
        };

        // 修改calculateMBTI函数
        function calculateMBTI() {
            const loader = document.getElementById('mbtiLoader');
            const resultDiv = document.getElementById('mbtiResult');
            
            // 显示加载动画
            loader.style.display = 'block';
            resultDiv.textContent = '';

            setTimeout(() => {
                const answers = [
                    document.querySelector('input[name="q1"]:checked')?.value,
                    document.querySelector('input[name="q2"]:checked')?.value,
                    document.querySelector('input[name="q3"]:checked')?.value,
                    document.querySelector('input[name="q4"]:checked')?.value
                ];

                if (answers.includes(undefined)) {
                    alert("请回答所有问题");
                    loader.style.display = 'none';
                    return;
                }

                const mbti = answers.join('');
                const description = mbtiDescriptions[mbti] || "未知类型";
                resultDiv.innerHTML = `
                    <h3>你的MBTI类型是：${mbti}</h3>
                    <p>${description}</p>
                `;
                loader.style.display = 'none';
            }, 1000);  // 模拟1秒加载时间
        }

        // 星座运势数据
        const fortunes = {
            "白羊座": "今天你充满活力，适合开始新项目。",
            "金牛座": "财运不错，但要小心冲动消费。",
            "双子座": "沟通能力增强，适合谈判和社交。",
            "巨蟹座": "家庭关系和谐，适合与家人共度时光。",
            "狮子座": "领导能力突出，适合组织活动。",
            "处女座": "工作效率高，适合处理细节问题。",
            "天秤座": "人际关系良好，适合结交新朋友。",
            "天蝎座": "直觉敏锐，适合做出重要决定。",
            "射手座": "旅行运佳，适合规划长途旅行。",
            "摩羯座": "事业运上升，适合制定长期计划。",
            "水瓶座": "创意丰富，适合进行艺术创作。",
            "双鱼座": "情感丰富，适合表达内心感受。"
        };

        function getFortune() {
            const zodiac = document.getElementById('zodiac').value;
            const result = fortunes[zodiac] || "请选择有效的星座";
            const today = new Date();
            const dateStr = `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`;
            document.getElementById('fortuneResult').textContent = `${dateStr}\n${result}`;
        }
    </script>
</body>
</html>
样式如下：