国内CCAR-141部驾驶员学校名单 中国民用航空飞行学院 2026第十届上海国际航空航天技术与设备展览会 2026全国通航企业名单 2026年美加墨世界杯足球赛 -豪华“战机”大比拼！ 中东公务航空在成都拿证运营 雄安鄚州机场：京津冀低空经济核心枢纽 五月我国新开国际航空货运航线80条 和龙金达莱通用机场：东北最大A1类通用机场 洛阳伊滨机场：豫西首座取证A类通用机场
微信关注，获取更多
当前位置：飞行邦网 > Geo > 正文

冷知识答题红包项目介绍附html源码

  • missli 发布于 2026-06-21
  • 分类：Geo
  • 阅读(8)
  • 评论(0)

　　冷知识答题红包是一款轻量化互动引流网页项目，结合趣味冷知识问答 + 红包福利激励，用户答对随机科普冷知识题目后，就能弹出红包弹窗、领取复制红包口令，主打低成本线上获客、私域引流、活动裂变。

　　二、核心玩法流程

　　用户打开页面，自动随机展示一道趣味冷知识选择题;

　　用户选择答案，系统自动判断对错，标红错误、标绿正确;

　　答题正确：弹出喜庆红包界面，展示红包金额 + 专属口令，支持一键复制;

　　答题错误：提示领取失败，无红包福利。

　　三、项目用途(适用场景)

　　私域引流：公众号、社群、短视频挂载页面，用红包吸引用户加好友、进群;

　　活动营销门店活动、线上小活动、节日互动小游戏;

　　涨粉工具：自媒体、电商、本地号用来提升页面停留时长、留存;

　　轻量活动页面无需小程序，仅 HTML 网页，手机电脑直接打开，部署简单。

　　四、项目特点

　　轻量化：单 HTML 文件，不用服务器、数据库，本地直接打开;

　　低门槛：可自定义题库、红包金额、口令、页面配色;

　　互动性强：冷知识趣味性高，降低用户抵触，提升参与意愿;

　　引流属性强：依靠红包福利驱动用户主动转发、复制口令。

　　五、盈利 / 运营逻辑

　　通过免费红包口令福利吸引用户停留、转发分享页面，以此增加曝光、引流至微信、店铺、账号，最终实现涨粉、成交、社群拉新等营销目的。

以下是源代码：冷知识答题红包

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            width: 100%;
            max-width: 450px;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .title {
            font-size: 24px;
            color: #d32f2f;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }

        .question-box {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .question {
            font-size: 18px;
            color: #333;
            line-height: 1.6;
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 25px;
        }

        .option {
            background: #e3f2fd;
            border: 1px solid #90caf9;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
        }

        .option:hover {
            background: #bbdefb;
            transform: translateY(-2px);
        }

        .option.correct {
            background: #c8e6c9;
            border-color: #81c784;
        }

        .option.wrong {
            background: #ffcdd2;
            border-color: #e57373;
        }

        .tip {
            color: #999;
            font-size: 14px;
            margin-bottom: 15px;
        }

        /* 红包弹窗 */
        .redpack-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        .redpack-box {
            background: #e53935;
            width: 300px;
            border-radius: 20px;
            padding: 40px 20px;
            text-align: center;
            color: white;
            position: relative;
            animation: openUp 0.5s ease forwards;
        }

        @keyframes openUp {
            from {
                transform: scale(0.5);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .redpack-title {
            font-size: 26px;
            margin-bottom: 10px;
        }

        .redpack-money {
            font-size: 36px;
            font-weight: bold;
            margin: 15px 0;
        }

        .redpack-code {
            background: white;
            color: #e53935;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            margin: 15px 0;
            display: inline-block;
            letter-spacing: 2px;
        }

        .copy-btn {
            background: white;
            color: #e53935;
            border: none;
            padding: 10px 25px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            color: white;
            font-size: 20px;
            cursor: pointer;
            background: none;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">🧧 冷知识答题红包</div>
        <div class="subtitle">答对题目即可领取红包</div>

        <div class="question-box">
            <div class="question" id="question">题目加载中...</div>
        </div>

        <div class="options" id="options">
            <div class="option">A. 加载中</div>
            <div class="option">B. 加载中</div>
            <div class="option">C. 加载中</div>
        </div>

        <div class="tip">温馨提示：每人只有一次答题机会哦</div>
    </div>

    <!-- 红包弹窗 -->
    <div class="redpack-modal" id="redpackModal">
        <div class="redpack-box">
            <button class="close-btn" onclick="closeModal()">×</button>
            <div class="redpack-title">恭喜你！</div>
            <div class="redpack-money">¥ 8.88</div>
            <div>红包口令</div>
            <div class="redpack-code" id="redpackCode">LINGSHI888</div>
            <button class="copy-btn" onclick="copyCode()">复制口令</button>
        </div>
    </div>

    <script>
        // 冷知识题库（可自行增删）
        const questions = [
            {
                question: "下列哪种动物不会眨眼？",
                options: ["猫", "鱼", "狗"],
                answer: 1
            },
            {
                question: "扑克牌中，黑桃A图案为什么比其他A大？",
                options: ["为了好看", "英国皇室规定", "印刷错误"],
                answer: 1
            },
            {
                question: "蚊子最喜欢叮咬什么血型的人？",
                options: ["A型", "B型", "O型"],
                answer: 2
            },
            {
                question: "水在多少摄氏度时密度最大？",
                options: ["0℃", "4℃", "100℃"],
                answer: 1
            },
            {
                question: "下列哪种食物不会过期？",
                options: ["蜂蜜", "牛奶", "面包"],
                answer: 0
            }
        ];

        let currentQ = null;
        let canAnswer = true;

        // 随机获取题目
        function getRandomQuestion() {
            const index = Math.floor(Math.random() * questions.length);
            currentQ = questions[index];
            showQuestion();
        }

        // 显示题目
        function showQuestion() {
            document.getElementById("question").innerText = currentQ.question;
            const optBox = document.getElementById("options");
            optBox.innerHTML = "";

            currentQ.options.forEach((item, i) => {
                const div = document.createElement("div");
                div.className = "option";
                div.innerText = `${["A", "B", "C"][i]}. ${item}`;
                div.onclick = () => checkAnswer(i);
                optBox.appendChild(div);
            });
        }

        // 检查答案
        function checkAnswer(index) {
            if (!canAnswer) return;
            canAnswer = false;

            const options = document.querySelectorAll(".option");
            options[index].classList.add(index === currentQ.answer ? "correct" : "wrong");

            if (index === currentQ.answer) {
                // 正确：弹出红包
                setTimeout(() => {
                    document.getElementById("redpackModal").style.display = "flex";
                }, 800);
            } else {
                // 错误：提示
                setTimeout(() => {
                    alert("回答错误，红包领取失败！");
                }, 800);
            }
        }

        // 复制红包口令
        function copyCode() {
            const code = document.getElementById("redpackCode").innerText;
            navigator.clipboard.writeText(code).then(() => {
                alert("复制成功！快去粘贴使用吧");
            });
        }

        // 关闭弹窗
        function closeModal() {
            document.getElementById("redpackModal").style.display = "none";
        }

        // 初始化
        window.onload = getRandomQuestion;
    </script>
</body>
</html>

未经允许不得转载：飞行邦网 » 冷知识答题红包项目介绍附html源码

作者：missli

相关推荐

评论

8+4=
通航企业

全国通航企业

2026年全国通航企业数据

通航机场

通航机场

2026年全国通航机场数据

医院直升机场

医院直升机场

全国医院直升机场

2026 年 6 月
一 二 三 四 五 六 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

备案：豫ICP备19007544号-3

消息 视频 发现 我的