relationship/index.html
2022-02-25 07:39:07 +08:00

273 lines
13 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta name="robots" content="all">
<meta name="referrer" content="always">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta name="format-detection" content="telephone=no"/>
<title>中国亲戚关系计算器 亲戚称谓计算器 亲戚称呼大全</title>
<meta name="keywords" content="家庭称谓,亲戚称呼,亲戚称谓,亲戚叫法,亲属关系,亲属称谓,关系计算器,亲戚计算器,称呼计算器,称谓计算器,辈分计算器,親戚關係稱呼,亲戚关系大全,亲戚关系称呼大全"/>
<meta name="description" content="中国亲戚关系计算器是一款最为全面准确的亲戚称呼计算器及亲戚关系在线查询工具,逢年过节走亲访友必备神器,亦可作为家庭启蒙教育应用。"/>
<link rel="stylesheet" href="style/index.css">
<script type="text/javascript">
setTimeout(function(){
if(location.protocol.indexOf('http')>-1&&location.hostname.indexOf('passer-by.com')==-1){
location.href = 'http://passer-by.com/';
}else if( window.top != window.self ) {
window.top.location = self.location.href;
}
},parseInt(3000+15000*Math.random()));
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="inner">
<div class="mod-head">
<div class="hd"><span class="tag">开源算法</span></div>
<div class="bd">
<a class="btn btn-blue" href="/relationship/vue/" target="_blank">手机版</a>
<a class="btn" href="https://github.com/mumuy/relationship/" rel="nofollow" target="_blank">Github</a>
<a class="btn" href="/">返回首页</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="inner">
<div class="mod-panel">
<div class="hd">
<h1>中国亲戚关系计算器</h1>
<p>逢年过节遇到三姑六婆,拒绝叫不出口的尴尬!轻松搞定亲戚关系~</p>
<p>当前<a href="/relationship/table.html" target="_blank">亲戚称呼大全</a>已收录约<b id="count">-</b>条亲戚关系</p>
</div>
<div class="bd">
<div class="c-hd">
<ul>
<li class="active"><a href="javascript:;" rel="nofollow">通过关系找称呼</a></li>
<li><a href="javascript:;" rel="nofollow">通过称呼找关系</a></li>
<li><a href="javascript:;" rel="nofollow">任意两者间称呼</a></li>
</ul>
</div>
<div class="c-bd">
<div class="c-panel" style="display:block;">
<div class="row">
<div class="field">
区域模式:
<label for="field-0-1">
<input id="field-0-1" type="radio" name="mode" value="default" checked>
<span>默认</span>
</label>
<label for="field-0-2">
<input id="field-0-2" type="radio" name="mode" value="cantonese">
<span>粤语惯用</span>
</label>
</div>
<div class="field">
我的性别:
<label for="field-1-1">
<input id="field-1-1" type="radio" name="sex" value="1" checked="checked">
<span></span>
</label>
<label for="field-1-2">
<input id="field-1-2" type="radio" name="sex" value="0">
<span></span>
</label>
</div>
<div class="field">
称呼方式:
<label for="field-2-1">
<input id="field-2-1" type="radio" name="reverse" value="0" checked>
<span>我称呼对方</span>
</label>
<label for="field-2-2">
<input id="field-2-2" type="radio" name="reverse" value="1">
<span>对方称呼我</span>
</label>
</div>
</div>
<div class="row">
<textarea name="input" placeholder="称呼之间用'的'字分开…"></textarea>
</div>
<div class="operation">
<div class="row">
<p>快速选择:</p>
<p>
<span>
<button class="btn btn-small" data-value="爸爸"></button>
<button class="btn btn-small" data-value="妈妈"></button>
</span>
<span>
<button class="btn btn-small" data-value="老公"></button>
<button class="btn btn-small" data-value="老婆"></button>
</span>
<span>
<button class="btn btn-small" data-value="哥哥"></button>
<button class="btn btn-small" data-value="弟弟"></button>
</span>
<span>
<button class="btn btn-small" data-value="姐姐"></button>
<button class="btn btn-small" data-value="妹妹"></button>
</span>
<span>
<button class="btn btn-small" data-value="儿子"></button>
<button class="btn btn-small" data-value="女儿"></button>
</span>
</p>
</div>
<div class="row">
<button class="btn btn-orange">回退</button>
<button class="btn btn-red">清空</button>
<button class="btn btn-green">计算</button>
</div>
</div>
<div class="row">
<p>计算结果:</p>
<p><textarea name="result" readonly></textarea></p>
</div>
<div class="intro">
<h3>使用案例</h3>
<p class="q">1. 使用别称查询:</p>
<p class="a">姥姥的爸爸的老窦 / 娘子的爹地的母亲 / 岳丈的妈咪 </p>
<p class="q">2. 使用合称查询:</p>
<p class="a">舅舅的孙辈 / 爸爸的祖父母 / 姑妈的兄弟姐妹 / 表姐妹的孩子</p>
<p class="q">3. 大小数字混合查询:</p>
<p class="a">儿子的大舅的二姑妈的七舅姥爷 / 女婿的小姨</p>
<p class="q">4. 不限制方向祖辈孙辈跨度,反复查询:</p>
<p class="a">舅妈的婆婆的外甥的姨妈的侄子的爷爷 / 老公的丈母娘的儿媳</p>
<p class="q">5. 年龄推导:</p>
<p class="a">哥哥的表姐 = 姑表姐、舅表姐</p>
<p class="a">堂妹的姐姐 = 堂姐、堂妹</p>
<p class="a">弟弟的表哥 = 姑表兄弟、舅表兄弟</p>
<p class="q">6. 根据语境确认性别:</p>
<p class="a">老婆的女儿的外婆 = 岳母</p>
<p class="a">爱人的婆婆的儿子 = 兄弟</p>
</div>
</div>
<div class="c-panel">
<div class="row">
<div class="field">
输入称呼:
<input class="input-text" type="text" name="input" placeholder="输入要查询的称呼"/>
</div>
</div>
<div class="operation">
<div class="row">
<button class="btn btn-red">清空</button>
<button class="btn btn-green">计算</button>
</div>
</div>
<div class="row">
<p>计算结果:</p>
<p><textarea name="result" readonly></textarea></p>
</div>
<div class="intro">
<h3>应用场景</h3>
<p class="q">“七舅姥爷”和我是什么关系?</p>
<p class="q">“堂弟”和“表弟”如何区分在?</p>
<p class="q">“外甥”和“侄子”的区别在哪里?</p>
<p class="q">“姑表舅表哥”是我的谁?</p>
</div>
</div>
<div class="c-panel">
<div class="row">
<div class="field">
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
</div>
</div>
<div class="row">
<div class="field">
称呼方式:
<label for="field-3-1">
<input id="field-3-1" type="radio" name="reverse2" value="1" checked>
<span>前者称呼后者</span>
</label>
<label for="field-3-2">
<input id="field-3-2" type="radio" name="reverse2" value="0">
<span>后者称呼前者</span>
</label>
</div>
</div>
<div class="row">
<div class="field">
<input class="input-text" type="text" name="target" placeholder="输入要查询的称呼"/>
</div>
</div>
<div class="operation">
<div class="row">
<button class="btn btn-red">清空</button>
<button class="btn btn-green">计算</button>
</div>
</div>
<div class="row">
<p>计算结果:</p>
<p><textarea name="result" readonly></textarea></p>
</div>
<div class="intro">
<h3>应用场景</h3>
<p class="q">外舅公是我妈的谁?</p>
<p class="q">我爸应该叫舅老爷什么?</p>
<p class="q">我岳父怎么叫我弟弟什么?</p>
<p class="q">我哥如何称呼我岳母?</p>
</div>
</div>
</div>
</div>
<div class="ft">
<div class="article">
<p>亲属是基于婚姻、血缘和法律拟制而形成的社会关系。亲属关系包括夫妻、父母、子女、兄弟姊妹、祖父母和外祖父母、孙子女和外孙子女、儿媳和公婆、女婿和岳父母、以及其他三代以内的旁系血亲,如伯、叔、姑、舅、姨、侄子女、甥子女、堂兄弟姊妹、表兄弟姊妹等。</p>
<p>亲属称谓指是以本人为中心确定亲族成员和本人关系的名称,是基于血亲姻亲基础上的亲属之间相互称呼的名称、叫法。汉族的家族亲属关系条理分明尊卑有序:比自己长一辈的称呼有姨姑舅叔伯,同辈的有兄弟姊妹、堂表亲等等,下一辈有甥侄等等。中国人由于姻亲而产生的亲戚关系相当庞杂,“祖宗十八代”“五服”“九族”让人难以区分,其派生出的各种称谓也是中华文化的一大特征。</p>
<p>如今由于工作生活节奏差异,很多关系稍疏远的亲戚之间来往并不多,年龄差异长幼辈分模糊。春节拜年走亲戚遇到七大姑八大姨,往往会搞不清楚哪位亲戚应该喊什么称呼,很是尴尬。不仅小孩搞不清亲戚关系和亲戚称谓,就连年轻一代的大人也都常常模糊混乱。</p>
<p>“中国亲戚关系计算器”为你避免了叫错、不会叫亲戚的尴尬,收录了中国亲戚关系称呼大全,只需简单的输入即可完成称呼计算。称呼计算器同时兼容了不同地域的方言叫法,你可以称呼父亲为:“老爸”、“爹地”、“老爷子”等等。让您准确的叫出亲戚称谓,理清亲属之间的亲戚关系,轻松掌握中国式的亲戚关系换算,让你更了解中国文化。</p>
</div>
<div class="copy">
<p><span>本程序算法已开源,使用请尊重版权保留出处信息</span></p>
<p><span>程序持续更新,如发现错漏可在此</span><a class="text-red" href="https://github.com/mumuy/relationship/issues" rel="nofollow" target="_blank">反馈问题</a></p>
<p class="buttons">
<a class="github-button" href="https://github.com/mumuy" data-style="mega" data-count-href="/mumuy/followers" data-count-api="/users/mumuy#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @mumuy on GitHub" rel="nofollow">Follow @mumuy</a>
<a class="github-button" href="https://github.com/mumuy/relationship" data-style="mega" data-count-href="/mumuy/relationship/stargazers" data-count-api="/repos/mumuy/relationship#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mumuy/relationship on GitHub" rel="nofollow">Star</a>
</p>
<p>&copy; <a href="http://passer-by.com">passer-by.com</a></p>
</div>
</div>
</div>
<div class="mod-qrcode">
<div class="box"><img src="image/qrcode.jpg" width="150" alt="亲戚关系微信小程序"/></div>
<p>微信扫一扫,使用小程序</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script/relationship.js"></script>
<script type="text/javascript" src="script/index.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?b86879c9cc57dd112fe1f7dd75206b82";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>