Files
mama-box/topic/ceshi/index.html

436 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测你是什么样的妈妈?</title>
<!-- 孕期专题 · 趣味测试(孕期首页「其他妈妈也在搜」第 2 条入口)。
2026-10-31 按《孕期专题页统一设计规范 v2》重做:主色 #7C5CFC、白底、单色线性图标、16 道题。
一页三屏:开始 / 答题(一题一屏)/ 结果;结果存 localStorage「mmbox.ceshi.v2」(题目已换,不复用 v1)。
插画复用 img/*.webp。自成一页:不引 app.js;返回走 history 或相对路径 ../../,跳工具走 /<slug>/ 并带 search + hash。
纯娱乐,不采集、不上报答题数据。 -->
<style>
:root{--c:#7C5CFC;--cbg:#F1EDFF;--ink:#1F2329;--txt:#4E5969;--sub:#86909C;--line:#EEF0F3;--soft:#F7F8FA}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#fff;color:var(--txt);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hide{position:absolute;width:0;height:0;overflow:hidden}
/* 顶栏 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
.bar.sh{border-bottom-color:var(--line)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.bar .back .ic{width:22px;height:22px}
.bar .t{font-weight:600;font-size:16px;color:var(--ink)}
/* 三屏 */
.view{display:none;padding:0 20px}
.view.on{display:block;animation:vin .35s ease both}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pic{width:100%;height:200px;object-fit:cover;object-position:center 40%;border-radius:20px;background:var(--soft)}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;font-size:16px;font-weight:700}
.btn.pri{background:var(--c);color:#fff}
.btn.sec{background:#fff;color:var(--c);border:1px solid var(--c)}
.btn:active{opacity:.85}
/* 开始 */
#vStart{padding-top:12px;text-align:center}
#vStart h1{margin-top:22px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
#vStart .meta{margin-top:10px;font-size:14px;color:var(--sub)}
#vStart .meta b{color:var(--c);font-weight:700}
#vStart .btn{margin-top:28px}
#vStart .note{margin-top:12px;font-size:12.5px;color:var(--sub)}
/* 答题 */
#vQuiz{padding-top:8px}
.qtop{display:flex;align-items:center;justify-content:space-between;height:32px}
.qtop .no{font-size:13px;color:var(--sub)}
.qtop .no b{font-size:15px;color:var(--c);font-weight:700}
.qtop button{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;color:var(--sub);padding:4px 0 4px 8px}
.qtop button .ic{width:16px;height:16px}
.qtop button:disabled{visibility:hidden}
.track{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:4px;background:var(--c);transition:width .35s ease}
.qbody{margin-top:28px;transition:opacity .2s ease,transform .2s ease}
.qbody.out{opacity:0;transform:translateY(-8px)}
.qbody.pre{opacity:0;transform:translateY(8px);transition:none}
.qbody h2{font-size:22px;font-weight:700;line-height:1.45;color:var(--ink);min-height:64px}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:left;font-size:16px;line-height:1.45;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.opt .l{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--sub);font-size:13px;font-weight:700;transition:background .2s,color .2s}
.opt.sel{border-color:var(--c);background:var(--cbg);color:var(--c);font-weight:600}
.opt.sel .l{background:var(--c);color:#fff}
.qtip{margin-top:18px;text-align:center;font-size:12.5px;color:var(--sub)}
/* 结果 */
#vResult{padding-top:12px}
.rhead{position:relative;text-align:center}
.rhead .last{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border-radius:99px;padding:0 10px;font-size:12px;line-height:24px;color:var(--sub);display:none}
.rhead .last.on{display:block}
.rhead .you{margin-top:18px;font-size:14px;color:var(--sub)}
.rhead h1{margin-top:2px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
.rhead h1 em{font-style:normal;color:var(--c)}
.rhead p{margin-top:6px;font-size:15px;color:var(--txt)}
.blk{margin-top:24px}
.blk h2{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.4}
.blk h2 .ic{color:var(--c)}
.tags{display:flex;gap:8px;margin-top:12px}
.tags span{flex:1;text-align:center;padding:8px 4px;border-radius:12px;background:var(--cbg);color:var(--c);font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap}
.tip{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.7}
.dist{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:10px}
.dr{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--txt)}
.dr .n{flex:none;width:68px;white-space:nowrap}
.dr .tr{flex:1;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
.dr .tr i{display:block;height:100%;width:0;border-radius:6px;background:#D6CCFE;transition:width .8s cubic-bezier(.3,.7,.2,1)}
.dr .p{flex:none;width:36px;text-align:right;color:var(--sub)}
.dr.me .n{color:var(--c);font-weight:700}
.dr.me .tr i{background:var(--c)}
.dr.me .p{color:var(--c);font-weight:700}
.tool{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;gap:12px}
.tool .ti{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--cbg);color:var(--c)}
.tool .ti .ic{width:22px;height:22px}
.tool .tx{flex:1;min-width:0}
.tool small{display:block;font-size:12.5px;color:var(--sub);line-height:1.5}
.tool b{display:block;font-size:16px;color:var(--ink);line-height:1.4}
.tool .go{flex:none;height:34px;padding:0 16px;border-radius:99px;background:var(--c);color:#fff;font-size:14px;font-weight:600}
.acts{display:flex;gap:10px;margin-top:20px}
.acts .btn{flex:1;font-size:15px}
.foot{margin:28px 20px 0;font-size:12px;color:var(--sub);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translate(-50%,8px);max-width:300px;padding:10px 16px;border-radius:12px;background:rgba(31,35,41,.88);color:#fff;font-size:13.5px;line-height:1.6;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.qbody,.view.on{opacity:1;transform:none;transition:none;animation:none}}
</style>
</head>
<body>
<!-- 单色线性图标 -->
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/></symbol>
<symbol id="i-bulb" viewBox="0 0 24 24"><path d="M9 18.5h6M10.2 21.5h3.6M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/></symbol>
<symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 20h16M7 16v-4M12 16V7M17 16v-6"/></symbol>
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.4-5.7M20 4v4.5h-4.5"/></symbol>
<symbol id="i-share" viewBox="0 0 24 24"><path d="M12 15V4M8 7.5L12 3.5l4 4M5 12v6.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V12"/></symbol>
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.5h.01M14.8 11.5h.01M9.5 15.2c1.4 1.2 3.6 1.2 5 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
<symbol id="i-scale" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></symbol>
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17.2h2"/></symbol>
<symbol id="i-bag" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2M3.5 13h17"/></symbol>
</svg>
<div id="scroll">
<header class="bar" id="bar">
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
<span class="t">孕期专题</span>
</header>
<!-- ① 开始 -->
<main class="view" id="vStart">
<img class="pic" src="img/hero.webp" alt="孕妈拿着小测试卡片微笑">
<h1>测一测<br>你是什么样的妈妈?</h1>
<p class="meta"><b>16</b> 道题 · 约 <b>2</b> 分钟</p>
<button class="btn pri" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
<p class="note">没有对错,凭第一感觉选就好</p>
</main>
<!-- ② 答题 -->
<main class="view" id="vQuiz">
<div class="qtop">
<span class="no">第 <b id="qNo">1</b> / <span id="qTotal">16</span> 题</span>
<button id="prevBtn"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一题</button>
</div>
<div class="track"><i id="qFill"></i></div>
<div class="qbody" id="qBody">
<h2 id="qTitle"></h2>
<div class="opts" id="qOpts"></div>
</div>
<p class="qtip">选完自动进入下一题</p>
</main>
<!-- ③ 结果 -->
<main class="view" id="vResult">
<div class="rhead">
<img class="pic" id="rImg" src="" alt="">
<span class="last" id="rLast"></span>
<p class="you">你是</p>
<h1><em id="rName"></em></h1>
<p id="rLine"></p>
</div>
<section class="blk fade">
<h2><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>你的优势</h2>
<div class="tags" id="rAdv"></div>
</section>
<section class="blk fade">
<h2><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>给你一句建议</h2>
<p class="tip" id="rTip"></p>
</section>
<section class="blk fade">
<h2><svg class="ic"><use href="#i-chart" xlink:href="#i-chart"/></svg>你的类型占比</h2>
<div class="dist" id="rDist"></div>
</section>
<div class="tool fade">
<span class="ti"><svg class="ic"><use id="rToolIc" href="#i-baby" xlink:href="#i-baby"/></svg></span>
<span class="tx"><small>适合你的工具</small><b id="rToolName"></b></span>
<button class="go" id="rTool">去用</button>
</div>
<div class="acts fade">
<button class="btn sec" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>再测一次</button>
<button class="btn pri" id="shareBtn"><svg class="ic"><use href="#i-share" xlink:href="#i-share"/></svg>分享给老公看看</button>
</div>
</main>
<p class="foot">趣味测试,仅供娱乐</p>
</div>
<div class="toast" id="toast"></div>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var sc = $('#scroll');
var KEY = 'mmbox.ceshi.v2';
var XL = 'http://www.w3.org/1999/xlink';
function useRef(el, id) { el.setAttribute('href', '#i-' + id); el.setAttributeNS(XL, 'xlink:href', '#i-' + id); }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份 hash 原样带回 */
$('#back').addEventListener('click', function () {
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
else location.href = '../../' + location.search + location.hash;
});
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('sh', sc.scrollTop > 4); }, { passive: true });
/* 4 种类型(ORDER 顺序即平分时的优先级) */
var TYPES = {
nuan: { name: '温柔守护型', img: 'img/nuan.webp', alt: '妈妈温柔地抱着宝宝',
line: '你的爱细腻又安稳,是宝宝最软的依靠',
adv: ['共情力强', '细心周到', '安全感满满'],
tip: '担心时别一个人扛,拿不准就问产检医生;累了就让家人搭把手。',
tool: { name: '数胎动', path: '/taidong/', ic: 'baby' } },
xue: { name: '理性研究型', img: 'img/xue.webp', alt: '孕妈认真看书做笔记',
line: '知识是你的底气,每个决定都做过功课',
adv: ['会甄别信息', '计划周全', '遇事冷静'],
tip: '网上说法真假混杂,看到吓人的先打个问号,一切以产检医生意见为准。',
tool: { name: '孕期体重', path: '/yunqi-tizhong/', ic: 'scale' } },
song: { name: '松弛自在型', img: 'img/song.webp', alt: '孕妈靠在软垫上悠闲喝茶',
line: '情绪稳定心态好,好心情就是最好的胎教',
adv: ['情绪稳定', '抓大放小', '快乐能量'],
tip: '松弛也别错过产检,唐筛、大排畸、糖耐记得提前预约。',
tool: { name: '孕检日历', path: '/chanjian-rili/', ic: 'cal' } },
re: { name: '元气分享型', img: 'img/re.webp', alt: '孕妈和朋友们开心聊天',
line: '热情开朗爱连接,总有人陪你期待宝宝',
adv: ['社交满分', '乐于分享', '行动力强'],
tip: '群里的经验只作参考,涉及身体和用药,以产检医生意见为准。',
tool: { name: '待产清单', path: '/daichan-qingdan/', ic: 'bag' } }
};
var ORDER = ['nuan', 'xue', 'song', 're'];
/* 16 道题:每个选项对应一种类型,顺序已打散 */
var QS = [
{ q: '刚知道怀孕的那一刻,你第一件事是?', o: [
['nuan', '摸摸肚子,跟宝宝打招呼'], ['xue', '马上搜孕早期注意事项'], ['re', '第一时间告诉最亲的人'], ['song', '先吃顿好的庆祝一下'] ] },
{ q: '明天要产检了,今晚你会?', o: [
['xue', '把要问医生的问题列好'], ['song', '早早睡觉,明天再说'], ['nuan', '有点忐忑,多摸摸肚子'], ['re', '去妈妈群问问要查啥'] ] },
{ q: '产检排队等了一个多小时,你在干嘛?', o: [
['re', '和旁边孕妈聊成了朋友'], ['xue', '翻看之前的检查报告'], ['song', '刷剧玩手机,不着急'], ['nuan', '和肚里宝宝说悄悄话'] ] },
{ q: '半夜宝宝在肚子里拳打脚踢,你会?', o: [
['song', '翻个身接着睡'], ['nuan', '轻轻拍拍:妈妈在呢'], ['xue', '看看时间,记一下胎动'], ['re', '叫醒老公一起感受'] ] },
{ q: '刷到一条「孕期千万别吃 XX」,你会?', o: [
['re', '转给姐妹们一起讨论'], ['nuan', '宁可信其有,先不吃'], ['song', '适量就好,不太在意'], ['xue', '先查查权威说法'] ] },
{ q: '突然特别想吃一样东西,你会?', o: [
['xue', '先查查孕妇能不能吃'], ['song', '想吃就吃,开心最重要'], ['nuan', '自己做一份,吃得放心'], ['re', '发朋友圈求推荐好店'] ] },
{ q: '婆婆端来一大锅补汤,你会?', o: [
['re', '拍照发群:被宠到了'], ['xue', '先问问汤里放了什么'], ['nuan', '笑着喝两口,谢谢婆婆'], ['song', '喝一碗,剩下全家分'] ] },
{ q: '莫名其妙想哭的时候,你会?', o: [
['song', '睡一觉,醒来就好了'], ['re', '打电话找闺蜜倾诉'], ['xue', '查查是不是激素在作怪'], ['nuan', '抱抱自己,允许情绪来'] ] },
{ q: '家里人对带娃方式意见不同时,你会?', o: [
['nuan', '先照顾大家情绪再沟通'], ['song', '大方向对就行,不纠结'], ['re', '全家开个小会摊开聊'], ['xue', '拿出资料讲科学依据'] ] },
{ q: '老公说「我也想参与孕期」,你会让他?', o: [
['xue', '学会看懂产检报告'], ['nuan', '每晚给宝宝讲个故事'], ['song', '负责每天逗你开心'], ['re', '陪你去上孕妈课'] ] },
{ q: '理想的孕期周末是?', o: [
['re', '约朋友喝个下午茶'], ['song', '窝在家睡到自然醒'], ['xue', '上节孕妈课或看本书'], ['nuan', '给宝宝写日记、理衣柜'] ] },
{ q: '给宝宝取名,你的方式是?', o: [
['song', '小名先叫着,大名不急'], ['xue', '查字义、读音和寓意'], ['re', '发起全家投票'], ['nuan', '选一个念着最温柔的'] ] },
{ q: '准备待产包,你的风格更像?', o: [
['nuan', '小衣服洗好晒好叠整齐'], ['re', '拉闺蜜一起逛,顺手分享'], ['song', '买齐必需品,缺啥再补'], ['xue', '按清单逐项打勾'] ] },
{ q: '离预产期还有一个月,你在?', o: [
['xue', '反复熟悉入院流程路线'], ['re', '和孕妈群约好互报喜讯'], ['nuan', '每天跟宝宝说慢慢来'], ['song', '该吃吃该睡睡,等发动'] ] },
{ q: '想象宝宝出生后的第一张照片,你希望是?', o: [
['re', '全家围着宝宝笑成一团'], ['song', '宝宝睡得四仰八叉'], ['nuan', '小手紧紧握着你的手指'], ['xue', '宝宝和身长体重出生卡'] ] },
{ q: '想象宝宝第一次大哭不止,你会?', o: [
['song', '先稳住自己,别慌'], ['nuan', '抱在怀里轻轻哼歌'], ['xue', '逐项排查:饿了还是尿了'], ['re', '视频问问有经验的妈妈'] ] }
];
$('#qTotal').textContent = QS.length;
var views = { start: $('#vStart'), quiz: $('#vQuiz'), result: $('#vResult') };
var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (es) {
es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { root: sc, threshold: .1 }) : null;
function show(name) {
Object.keys(views).forEach(function (k) { views[k].classList.toggle('on', k === name); });
sc.scrollTop = 0;
[].forEach.call(views[name].querySelectorAll('.fade'), function (el) {
el.classList.remove('in');
if (io) { io.unobserve(el); io.observe(el); } else el.classList.add('in');
});
}
/* 答题 */
var cur = 0, ans = [], busy = false;
var body = $('#qBody');
function paint() {
var q = QS[cur];
$('#qNo').textContent = cur + 1;
$('#qFill').style.width = ((cur + 1) / QS.length * 100) + '%';
$('#qTitle').textContent = q.q;
$('#qOpts').innerHTML = q.o.map(function (o, i) {
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '" data-t="' + o[0] + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) + '</span></button>';
}).join('');
$('#prevBtn').disabled = cur === 0;
}
/* 轻柔切换:淡出上移 → 换内容 → 自下淡入 */
function swap(after) {
busy = true;
body.classList.add('out');
setTimeout(function () {
after();
body.classList.remove('out');
body.classList.add('pre');
void body.offsetWidth;
body.classList.remove('pre');
setTimeout(function () { busy = false; }, 200);
}, 200);
}
$('#qOpts').addEventListener('click', function (e) {
var b = e.target.closest('.opt'); if (!b || busy) return;
busy = true;
ans[cur] = +b.dataset.i;
[].forEach.call(document.querySelectorAll('#qOpts .opt'), function (x) { x.classList.toggle('sel', x === b); });
setTimeout(function () {
if (cur < QS.length - 1) swap(function () { cur++; paint(); });
else { busy = false; finish(); }
}, 250);
});
$('#prevBtn').addEventListener('click', function () {
if (busy || cur === 0) return;
swap(function () { cur--; paint(); });
});
function startQuiz() {
cur = 0; ans = []; busy = false;
body.classList.remove('out', 'pre');
paint();
show('quiz');
}
$('#startBtn').addEventListener('click', startQuiz);
$('#againBtn').addEventListener('click', startQuiz);
function finish() {
var s = { nuan: 0, xue: 0, song: 0, re: 0 };
ans.forEach(function (i, qi) { s[QS[qi].o[i][0]]++; });
var top = ORDER.reduce(function (a, k) { return s[k] > s[a] ? k : a; }, ORDER[0]);
/* 平分时以最后一题的选择打破平局(如果它属于并列第一) */
var last = QS[QS.length - 1].o[ans[QS.length - 1]][0];
if (s[last] === s[top]) top = last;
var rec = { type: top, scores: s, at: Date.now() };
try { localStorage.setItem(KEY, JSON.stringify(rec)); } catch (e) {}
render(rec, false);
}
var curType = null;
function render(rec, fromCache) {
var t = TYPES[rec.type];
curType = t;
$('#rImg').src = t.img; $('#rImg').alt = t.alt;
$('#rName').textContent = t.name + '妈妈';
$('#rLine').textContent = t.line;
var last = $('#rLast');
if (fromCache && rec.at) {
var d = new Date(rec.at);
last.textContent = '上次测试 · ' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
last.classList.add('on');
} else last.classList.remove('on');
$('#rAdv').innerHTML = t.adv.map(function (a) { return '<span>' + esc(a) + '</span>'; }).join('');
$('#rTip').textContent = t.tip;
useRef($('#rToolIc'), t.tool.ic);
$('#rToolName').textContent = t.tool.name;
$('#rTool').onclick = function () { location.href = t.tool.path + location.search + location.hash; };
var total = 0; ORDER.forEach(function (k) { total += rec.scores[k] || 0; });
total = total || 1;
/* 占比按四舍五入后补差,保证合计 100% */
var pcts = ORDER.map(function (k) { return Math.round((rec.scores[k] || 0) / total * 100); });
var diff = 100 - pcts.reduce(function (a, b) { return a + b; }, 0);
pcts[ORDER.indexOf(rec.type)] += diff;
$('#rDist').innerHTML = ORDER.map(function (k, i) {
return '<div class="dr' + (k === rec.type ? ' me' : '') + '"><span class="n">' + TYPES[k].name.slice(0, 4) + '</span>' +
'<span class="tr"><i data-w="' + pcts[i] + '"></i></span><span class="p">' + pcts[i] + '%</span></div>';
}).join('');
show('result');
var bars = document.querySelectorAll('#rDist i');
function grow() { [].forEach.call(bars, function (b) { b.style.width = b.dataset.w + '%'; }); }
if (io) {
var bo = new IntersectionObserver(function (es) { if (es[0].isIntersecting) { setTimeout(grow, 120); bo.disconnect(); } }, { root: sc, threshold: .2 });
bo.observe($('#rDist'));
} else grow();
}
/* 分享:复制一段文字(链接不带身份 hash),复制不了就提示截图 */
var tt;
function toast(msg) {
var el = $('#toast'); el.textContent = msg; el.classList.add('on');
clearTimeout(tt); tt = setTimeout(function () { el.classList.remove('on'); }, 2400);
}
function copy(text) {
function legacy() { return new Promise(function (ok, no) {
var ta = document.createElement('textarea');
ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:-999px;opacity:0';
document.body.appendChild(ta); ta.select();
var r = false; try { r = document.execCommand('copy'); } catch (e) {}
document.body.removeChild(ta);
r ? ok() : no();
}); }
if (navigator.clipboard && window.isSecureContext) return navigator.clipboard.writeText(text).catch(legacy);
return legacy();
}
$('#shareBtn').addEventListener('click', function () {
if (!curType) return;
var text = '老公,我测出来是「' + curType.name + '妈妈」:' + curType.line + '。你觉得像吗?';
copy(text).then(function () { toast('已复制,发给老公看看吧'); }, function () { toast('截个图发给老公看看吧'); });
});
/* 入口:有上次结果直接看结果,否则开始页 */
var saved = null;
try { saved = JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) {}
if (saved && TYPES[saved.type] && saved.scores) render(saved, true);
else show('start');
/* 禁止下拉回弹:固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
var y0 = 0;
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
sc.addEventListener('touchmove', function (e) {
var dy = e.touches[0].clientY - y0;
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) e.preventDefault();
}, { passive: false });
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
})();
</script>
</body>
</html>