436 lines
25 KiB
HTML
436 lines
25 KiB
HTML
<!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 { '&': '&', '<': '<', '>': '>', '"': '"' }[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>
|