102 lines
7.8 KiB
HTML
102 lines
7.8 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>
|
||
<!-- 孕期计算器 · 宝宝会不会有双眼皮、酒窝（2026-11-06 用户从 20 个备选里选了 5 个，本页是其中之一）。
|
||
趣味估算：按常说的「显性 / 隐性」单基因模型算（双眼皮、酒窝、自然卷、有耳垂、美人尖当显性）。
|
||
爸妈有这个特征时，是不是「携带隐性」用人群比例 Q（隐性特征在中国人里的大致占比）推：携带概率 = 2pq / (p² + 2pq)，q = √Q；
|
||
如果爸 / 妈的父母里有人没有这个特征，就一定携带（每题中间那个选项）。
|
||
这些特征实际受多个基因影响，页面写明「仅供娱乐」，不当科学预测。
|
||
共用 ../_shared/calc.css + calc.js；自成一页，不引 app.js。 -->
|
||
<link rel="stylesheet" href="../_shared/calc.css?v=26110464">
|
||
<link rel="stylesheet" href="../_shared/wizard.css?v=26110464">
|
||
<style>:root{--c:#9A6BD8;--c2:#C3A2F0;--cbg:#F4EEFF}.pp{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:10px}.pp>span{flex:none;font-size:13px;font-weight:700;color:var(--m)}.pp .seg{flex:1;margin-top:0}.pp .seg button{min-width:0;height:auto;min-height:46px;font-size:13.5px;line-height:1.3;white-space:normal;padding:6px 4px}
|
||
.bars{margin-top:12px}.bars div{display:flex;align-items:center;gap:8px;margin-top:6px}.bars b{flex:none;width:58px;font-size:14px}.bars i{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}.bars i u{display:block;height:100%;border-radius:99px;background:#fff}.bars span{flex:none;width:42px;text-align:right;font-size:14px;font-weight:800}</style>
|
||
</head>
|
||
<body>
|
||
<div id="scroll">
|
||
<header class="bar" id="bar">
|
||
<button class="back" id="back" aria-label="返回"><svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg></button>
|
||
<span class="t">孕期计算器</span>
|
||
</header>
|
||
<section class="hd"><p>孕期计算器</p><h1>宝宝会不会有双眼皮、酒窝</h1><span>选一选爸妈的长相特征，看宝宝像谁多一点</span></section>
|
||
<section class="calc">
|
||
<div class="res" id="res"><div class="empty">把 5 个特征都选好，马上算出来</div></div>
|
||
</section>
|
||
|
||
<section class="sec">
|
||
<h2>每个特征怎么来的</h2>
|
||
<div class="cards" id="cards"></div>
|
||
</section>
|
||
|
||
<div class="tip"><b>说句实话：</b>双眼皮、酒窝这些长相实际受好几个基因一起影响，有的宝宝小时候单眼皮、长大变成双眼皮也很常见。这里按常说的显性、隐性来估算，图个乐呵，别当真。</div>
|
||
<p class="foot">趣味估算，仅供娱乐，不能用来判断亲子关系。</p>
|
||
</div>
|
||
<script src="../_shared/calc.js?v=26110464"></script>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var C = window.CK, $ = C.$;
|
||
C.shell();
|
||
/* [键, 特征, 没有时叫, 隐性在人群里的大致占比 Q, 说明] */
|
||
var T = [
|
||
['yan', '双眼皮', '单眼皮', .5, '双眼皮常被当作显性：爸妈有一个是双眼皮，宝宝是双眼皮的机会就不小；两个单眼皮的爸妈，宝宝多半也是单眼皮。小宝宝眼皮肿，几个月到几岁才看得出来。'],
|
||
['wo', '酒窝', '没酒窝', .8, '酒窝常被当作显性：爸妈有一个人有酒窝，宝宝有酒窝的机会就挺大。有的宝宝小时候有、长大脸上肉少了反而不明显。'],
|
||
['juan', '自然卷', '直发', .9, '自然卷常被当作显性，但中国人大多是直发；新生儿的胎毛和后来长的头发也可能不一样。'],
|
||
['er', '有耳垂', '没耳垂', .3, '耳垂分离（有明显的耳垂）常被当作显性，耳垂贴着脸长的是隐性。'],
|
||
['jian', '美人尖', '没美人尖', .7, '额头发际线中间往下的「V」字尖常被当作显性。']
|
||
];
|
||
var def = {}; T.forEach(function (x) { def[x[0] + 'f'] = ''; def[x[0] + 'm'] = ''; });
|
||
var st = C.store('mmbox.calc.yichuan', def);
|
||
/* 每个特征一题：爸爸一行、妈妈一行，三个选项：有 / 有，但他（她）爸妈有人没有 / 没有 */
|
||
var calc = $('.calc');
|
||
T.forEach(function (x) {
|
||
var d = document.createElement('div'); d.className = 'fld';
|
||
var row = function (who, k) { return '<div class="pp"><span>' + who + '</span><div class="seg" id="c' + k + '"><button type="button" data-v="1">有</button><button type="button" data-v="2">有，但长辈<br>有人没有</button><button type="button" data-v="0">没有</button></div></div>'; };
|
||
d.innerHTML = '<span class="lb">' + x[1] + '：爸爸妈妈有吗</span>' + row('爸爸', x[0] + 'f') + row('妈妈', x[0] + 'm') +
|
||
'<span class="hint">中间那个选项：自己有' + x[1] + '，但自己的爸爸或妈妈是' + x[2] + '，选它算得更准；不知道就选「有」</span>';
|
||
calc.appendChild(d);
|
||
C.seg($('#c' + x[0] + 'f'), st, x[0] + 'f', paint); C.seg($('#c' + x[0] + 'm'), st, x[0] + 'm', paint);
|
||
});
|
||
/* 爸 / 妈传给宝宝隐性基因的概率 */
|
||
function pr(v, Q) {
|
||
if (v === 0) return 1;
|
||
if (v === 2) return .5;
|
||
var q = Math.sqrt(Q), p = 1 - q, het = 2 * p * q / (p * p + 2 * p * q);
|
||
return het / 2;
|
||
}
|
||
function pct(x) { return Math.round(x * 100) + '%'; }
|
||
function paint() {
|
||
st.save();
|
||
var R = $('#res'), done = T.every(function (x) { return st[x[0] + 'f'] !== '' && st[x[0] + 'm'] !== ''; });
|
||
if (!done) { R.innerHTML = '<div class="empty">把 5 个特征都选好，马上算出来</div>'; $('#cards').innerHTML = ''; return; }
|
||
var rs = T.map(function (x) { return 1 - pr(st[x[0] + 'f'], x[3]) * pr(st[x[0] + 'm'], x[3]); });
|
||
var top = rs.map(function (p, i) { return [p, i]; }).sort(function (a, b) { return b[0] - a[0]; })[0];
|
||
/* 像谁：宝宝最可能的样子（概率过半取有）和爸、妈各对上几项 */
|
||
var f = 0, m = 0;
|
||
T.forEach(function (x, i) { var has = rs[i] >= .5, a = st[x[0] + 'f'] > 0, b = st[x[0] + 'm'] > 0; if (has === a) f++; if (has === b) m++; });
|
||
var like = f > m ? '爸爸' : m > f ? '妈妈' : '爸妈各一半';
|
||
R.innerHTML = '<small>宝宝最可能有的是</small><span class="big">' + T[top[1]][1] + '<u>' + pct(top[0]) + '</u></span><div class="bars">' + T.map(function (x, i) {
|
||
return '<div><b>' + x[1] + '</b><i><u style="width:' + (rs[i] * 100).toFixed(1) + '%"></u></i><span class="num">' + pct(rs[i]) + '</span></div>';
|
||
}).join('') + '</div><span class="note">5 个特征里，宝宝最可能的样子和爸爸对上 ' + f + ' 项、和妈妈对上 ' + m + ' 项，' + (like === '爸妈各一半' ? '爸妈各像一半' : '更像' + like + '一点') + '。趣味估算，仅供娱乐。</span>';
|
||
var W = { 1: '有', 2: '有（长辈有人没有）', 0: '没有' };
|
||
$('#cards').innerHTML = T.map(function (x, i) {
|
||
return '<div class="cd"><div class="k"><b>' + x[1] + '</b><strong class="num">' + pct(rs[i]) + '</strong></div><small>爸爸' + W[st[x[0] + 'f']] + ' · 妈妈' + W[st[x[0] + 'm']] + '</small><p>' + x[4] + '</p></div>';
|
||
}).join('');
|
||
}
|
||
paint();
|
||
})();
|
||
</script>
|
||
<script src="../_shared/brand.js?v=26110203"></script>
|
||
<script src="../../js/share-card.js?v=26110464"></script>
|
||
<script>window.mbShare('../../assets/share/t/yichuan-js.jpg', '宝宝会不会有双眼皮、酒窝：选选爸妈长相，看宝宝像谁'); /* 11-06 微信转发图 */</script>
|
||
<script src="../_shared/wizard.js?v=26110464"></script>
|
||
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
|
||
<script src="../../js/last-sub.js?v=26110703"></script> <!-- 11-07 小程序刷新回到这一页（见 js/last-sub.js） -->
|
||
<script src="../../js/pv.js?v=26110652"></script> <!-- 11-07 页面访问记录（推送效果看板，见 js/pv.js） -->
|
||
</body>
|
||
</html>
|