爆笑毒舌网页程序：“情侣思维同步度测验”，你敢一试吗？

貘云信息MOY Mobile

于 2025-07-19 10:30:00 发布

阅读量228

点赞数 5

CC 4.0 BY-SA版权

分类专栏：生活娱乐文章标签：搞笑程序网页程序

本文链接：https://blog.csdn.net/mobile808/article/details/149450564

生活娱乐专栏收录该内容

2 篇文章

订阅专栏

【为了拯救广大兄弟于“情绪雷区”于未然，也为了向女生们证明“我们虽然不懂，但我们可以练习”，我写下了这段测试程序。如果你通关了，也不要沾沾自喜，不代表你聪明，只能说明你女朋友或老婆已经调教得不错了。】

一，原理和设计思路

技术栈

原生 HTML + CSS + JavaScript，无需依赖框架

可部署在任何网页，支持移动端浏览器

所有逻辑封装于前端，便于修改题库或样式

逻辑结构

题库为一个数组 questions，包含：

q：问题

option：选项

answer：正确选项下标

punish：答错时显示的“语言暴力”

用户每点击一个选项：

判断正误

正确 → 显示“进入下一题”

错误 → 立即吐槽 + 计错一题

全部题目答完后，系统按答错题数打分：

每题10分，满分100分

得分<60 → 毁灭性点评

得分60–90 → 中立点评

满分 → 给予较高评价”

二，游戏规则说明

共 10 道题

每题有 4个选项

每答错一题，扣除10分

系统自动评分并输出“灵魂评语”

三，游戏流程

打开网页，点击选项开始答题

系统依次加载问题

答错立即吐槽，答对继续闯关

所有题目完成后展示得分和评语

得了高分别藏着，请在评论区留下你的身影～

全部代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>情侣爆笑思维差测试</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #fffafc;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .container {
      max-width: 600px;
      background-color: #fff;
      padding: 2em;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
      font-size: 24px;
      text-align: center;
      margin-bottom: 1em;
    }
    .question {
      font-size: 18px;
      margin-bottom: 1em;
    }
    .options button {
      display: block;
      width: 100%;
      padding: 10px;
      margin: 8px 0;
      background-color: #ff84b7;
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .options button:hover {
      background-color: #e76a9e;
    }
    .feedback {
      margin-top: 1em;
      font-weight: bold;
      color: #d0006f;
    }
    .end {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      color: #3c3c3c;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>情侣思维差大测试</h1>
    <div id="quiz">
      <div class="question" id="question"></div>
      <div class="options" id="options"></div>
      <div class="feedback" id="feedback"></div>
    </div>
    <div class="end" id="endMessage" style="display: none;"></div>
  </div>

  <script>
    const questions = [
      {
        q: "以下哪句话更像女朋友在生气？",
        options: ["我没事。", "你去忙吧。", "随便你。", "以上都是"],
        answer: 3,
        punish: "哇，你这脑回路怕不是塑料做的？"
      },
      {
        q: "你晚回家忘了报备，女朋友最可能说？",
        options: ["没事，我懂你忙", "你怎么不失踪啊", "哦", "睡了"],
        answer: 2,
        punish: "你对‘哦’的理解，和对恋爱的理解一样肤浅。"
      },
      {
        q: "女朋友问“我和你妈妈同时掉水里，你先救谁？”正确的回答是？",
        options: ["妈妈", "你", "我俩都救", "跳下去让你救我"],
        answer: 2,
        punish: "祝你这辈子只剩你妈能爱你。"
      },
      {
        q: "女朋友剪了一个丑丑的刘海，问你好不好看，你该说：",
        options: ["实话实说", "很特别", "这个发型很显脸小", "美爆了我天使的刘海！"],
        answer: 3,
        punish: "你的情商应该去返厂重修。"
      },
      {
        q: "女朋友生气说“你别理我”，你该怎么做？",
        options: ["立刻走开", "拿零食哄她", "抱住她说‘我就要理你’", "说‘好，那我去打游戏了’"],
        answer: 2,
        punish: "你的大脑是在按剧本走还是在直播翻车？"
      },
      {
        q: "下面哪句话是“死亡回答”？",
        options: ["你又怎么了？", "你吃醋啦？", "你说什么就是什么", "你怎么这么可爱"],
        answer: 0,
        punish: "你这不叫嘴巴说话，这是灵魂放弃沟通。"
      },
      {
        q: "如果女朋友开始秒回你消息，说明？",
        options: ["她很闲", "她很爱你", "她在监控你", "她怕你和别的妹子聊"],
        answer: 1,
        punish: "你把爱当工作来看了吗？"
      },
      {
        q: "节日没准备礼物怎么办？",
        options: ["装傻", "打一份PPT表达爱意", "给她转520红包", "补送双倍惊喜并道歉"],
        answer: 3,
        punish: "你没心，PPT也救不了你。"
      },
      {
        q: "恋爱中最忌讳的一件事是？",
        options: ["情绪冷暴力", "不报备行踪", "玩暧昧", "把女朋友当兄弟"],
        answer: 3,
        punish: "既然你把她当兄弟，那就别怪她把你当‘队友’。"
      },
      {
        q: "吵架时女朋友突然安静下来，她在想什么？",
        options: ["事情过去了", "想静静", "她准备秋后算账", "她已经原谅你了"],
        answer: 2,
        punish: "你的脑子是不是自动屏蔽了危险信号？"
      }
    ];

    let current = 0;
    let wrongCount = 0;

    function loadQuestion() {
      const q = questions[current];
      document.getElementById("question").textContent = `第${current + 1}题：${q.q}`;
      const opts = q.options.map((opt, i) => `<button onclick="checkAnswer(${i})">${opt}</button>`).join("");
      document.getElementById("options").innerHTML = opts;
      document.getElementById("feedback").textContent = "";
    }

    function checkAnswer(selected) {
      const q = questions[current];
      if (selected === q.answer) {
        document.getElementById("feedback").textContent = "答对啦！进入下一题～";
      } else {
        document.getElementById("feedback").textContent = `答错了！${q.punish}`;
        wrongCount++;
      }

      current++;
      setTimeout(() => {
        if (current < questions.length) {
          loadQuestion();
        } else {
          document.getElementById("quiz").style.display = "none";
          document.getElementById("endMessage").style.display = "block";
          const score = (questions.length - wrongCount) * 10;
          let message = `你的得分是 ${score} 分。\n`;
          if (score < 60) {
            message += "你果然不懂女生，你甚至可能不是地球人。";
          } else if (score < 100) {
            message += "还行，你起码活着走出了女生的情绪雷区。";
          } else {
            message += "🎉 你居然全对！你真的懂你女朋友吗？我怀疑你偷偷读了《女友语录》。";
          }
          document.getElementById("endMessage").textContent = message;
        }
      }, 1000);
    }

    // 初始加载第一题
    loadQuestion();
  </script>
</body>
</html>