大家好！作为一个经常摸鱼的前端爱好者，最近那个SBTI人格测试在朋友圈刷屏的时候，我第一反应不是去测自己是哪种人，而是------
这玩意儿能不能自己搞一个？
毕竟咱们程序员/站长/数码玩家的核心技能就是：看见什么火，就复刻什么。（手动狗头）
而且说实话，这种答题出结果的H5，技术上真的不难。今天就给大家写一篇不那么正经但绝对有用的教程，手把手教你怎么拥有一个属于自己的"测测你是哪种人"小测试。
重点是：所有题目、结果、文案你都可以随便改。
想做个"测测你是哪种打工人"？行。
“测测你的发疯程度”？也可以。
甚至做个"测测你是公司里哪个同事"来整蛊？完全没问题。
准备工作：比煮泡面还简单
你需要的东西就三样：
-
一台能开机的电脑
-
一个能打字的编辑器（记事本都行，但我推荐VS Code）
-
一个能上网的浏览器
没了。不用装任何后端环境，不用配数据库，甚至不用联网（除了下载源码那一步）。
核心思路：这玩意儿到底怎么工作的？
别看它花里胡哨的，本质就是个选答案、算总分、对号入座的逻辑：
text
用户选A → 维度X+1分 用户选B → 维度Y+1分 所有题目答完 → 算一下哪个维度得分最高 → 调取对应的人格描述 → 展示出来 就这么简单。没有后台，没有数据库，全部在一个HTML文件里搞定。
动手实操：最省力的方法
方法一：直接改现成的（推荐，最快）
去Gitee或GitHub上搜"SBTI 人格测试 源码"，找一个看起来顺眼的HTML版本下载。
下载下来之后，你需要改的是这几个地方：
1. 改题目
打开index.html或者js文件夹里的questions.js，你会看到类似这样的代码：
javascript
questions: [ { text: "周末你更倾向于？", options: [ { text: "约朋友出去玩", dimension: "E" }, { text: "一个人宅着", dimension: "I" } ] }, // 更多题目... ] 想改什么主题就照这个格式往里填。比如改成打工人版：
javascript
{ text: "周一早上闹钟响了，你会？", options: [ { text: "再睡五分钟...再睡五分钟...完蛋迟到了", dimension: "拖延怪" }, { text: "直接起床，从容洗漱去上班", dimension: "自律狂" } ] } 2. 改结果
找到results或者personalityTypes那一段：
javascript
results: { "INTJ": { title: "建筑师型人格", description: "你是个有战略头脑的人，喜欢规划和设计未来...", image: "intj.png" }, // 更多类型... } 改成你自己的。比如：
javascript
"拖延怪": { title: "晚期拖延症患者", description: "DDL才是第一生产力，你是这么认为的，也确实这么实践的。每一次卡点完成任务都让你肾上腺素飙升，但这种刺激还是少来点比较好。", advice: "建议：把手机放远一点。" } 3. 改样式
想换颜色？找到<style>标签里的background和color，改成你喜欢的色号。想换背景图？把body里的背景色改成背景图路径就行。
方法二：自己从头写一个精简版（适合想学原理的）
如果你想彻底搞懂这玩意儿怎么写的，我贴一个最简版本的代码框架，复制到index.html里就能跑：
html
<!DOCTYPE html> <html> <head> <title>你的专属人格测试</title> <style> body { font-family: system-ui; background: #f5f0ff; text-align: center; padding: 2rem; } .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 2rem; padding: 2rem; box-shadow: 0 8px 24px rgba(0,0,0,0.1); } button { background: #7c3aed; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 2rem; font-size: 1rem; cursor: pointer; } .option-btn { display: block; width: 100%; margin: 0.5rem 0; background: #f3f4f6; color: #1f2937; } </style> </head> <body> <div class="container" id="app"> <h1>✨ 测测你是哪种人 ✨</h1> <div id="content"></div> </div> <script> // 1. 定义题目 const questions = [ { text: "你更喜欢哪种环境？", options: ["热闹的聚会", "安静的咖啡角"], dimension: ["E","I"] }, { text: "做决定时你更依赖？", options: ["逻辑分析", "内心感受"], dimension: ["T","F"] } // 可以继续加题目... ]; // 2. 定义结果 const results = { "E": { title: "社交达人", desc: "你是人群中的太阳，走到哪里哪里亮。" }, "I": { title: "深度思考者", desc: "你享受独处，脑子里有一个完整的世界。" } }; let currentIndex = 0; let scores = { E:0, I:0, T:0, F:0 }; function render() { const content = document.getElementById('content'); if (currentIndex < questions.length) { const q = questions[currentIndex]; let html = `<h3>${q.text}</h3>`; q.options.forEach((opt, idx) => { html += `<button class="option-btn" onclick="select(${idx})">${opt}</button>`; }); content.innerHTML = html; } else { // 计算最终结果 let resultType = scores.E > scores.I ? "E" : "I"; let r = results[resultType]; content.innerHTML = `<h2>${r.title}</h2><p>${r.desc}</p><button onclick="location.reload()">再测一次</button>`; } } function select(optIndex) { const q = questions[currentIndex]; const dim = q.dimension[optIndex]; scores[dim]++; currentIndex++; render(); } render(); </script> </body> </html> 复制这段代码，保存成index.html，双击打开就能玩。
想发到网上让别人玩？三步搞定
本地自己玩没意思，想发到朋友圈装个X？安排：
-
买个便宜的空间或直接用免费托管：GitHub Pages、Vercel、Netlify都是免费的，把文件夹拖进去就自动部署好了。
-
域名（可选）：有闲钱可以买个
.xyz域名，一年几块钱。 -
分享：把生成的链接丢到朋友圈，配文"我也做了一个人格测试，来测测你是哪种人？"
进阶玩法：让它更像真的
如果觉得太简陋，可以加这几个功能，瞬间提升档次：
-
进度条：在顶部显示"第X/12题"，用户知道还要多久做完。
-
结果海报：用html2canvas库把结果转成图片，长按保存分享。
-
动画效果：答题和出结果时加点淡入淡出，体验感直接拉满。
-
反向链接：底部加个"我也要做个测试"，跳转到你的其他页面。
这些功能的代码网上都有现成的，搜一下就能复制粘贴。
几个避坑指南（血泪经验）
-
题目别太多：15-20道是极限，超过30道很少有人能耐心做完。
-
结果要正面：哪怕是"拖延症患者"，描述也要带点幽默和温情，别真的骂人。
-
移动端适配：90%的人会在手机上打开，所以字体要大、按钮要好点。
-
别蹭官方名字：如果你用的是"MBTI""SBTI"这些名字公开发布，可能会涉及版权问题，改成"你的专属人格档案"之类的就好。
其实这种小测试能火，不是因为技术多牛，而是因为它满足了人类的终极需求------了解自己，以及想让别人了解自己。
你甚至不需要写代码，用现成的源码改改文字和图片，十分钟就能出一个独家版本。拿去给朋友测着玩，或者给自己社群做互动工具，都挺有意思的。
动手试试吧，搞不定的话评论区问我，我摸鱼的时候会回的。
P.S. 如果你真的复制了我上面那段代码，记得把题目和结果改成自己的内容，不然大家测出来全是一样的结果，那就尴尬了。 
刷点分，我要排第一。