417 lines
16 KiB
HTML
417 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<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.hostname.indexOf('passer-by.com')<0){
|
|
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="bd">
|
|
<a class="btn btn-blue" href="/relationship/vue/" target="_blank">手机版</a>
|
|
<a class="btn" href="https://github.com/mumuy/relationship/" 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>当前已收录约<b>1650</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-1-1">
|
|
<input id="field-1-1" type="radio" name="sex" value="1" 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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ft">
|
|
<div class="intro">
|
|
<p>由于工作生活节奏不同，如今很多关系稍疏远的亲戚之间来往并不多。因此放假回家过年时，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。然而搞不清亲戚关系和亲戚称谓的不仅是小孩，就连年轻一代的大人也都常常模糊混乱。</p>
|
|
<p>“中国亲戚关系计算器”为你避免了这种尴尬，只需简单的输入即可算出称谓。输入框兼容了不同的叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等，方面不同地域的习惯叫法。</p>
|
|
</div>
|
|
<div class="copy">
|
|
<p><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>© <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 src="script/relationship.js"></script>
|
|
<script>
|
|
// tabs
|
|
(function(){
|
|
var $module = document.querySelector('.mod-panel');
|
|
var $items = $module.querySelectorAll('li');
|
|
var $panels = $module.querySelectorAll('.c-panel');
|
|
for(var i=0;i<$items.length;i++){
|
|
(function(i){
|
|
$items[i].addEventListener('click',function(){
|
|
for(var j=0;j<$panels.length;j++){
|
|
$items[j].className = i==j?'active':'';
|
|
$panels[j].style.display = i==j?'block':'none';
|
|
}
|
|
});
|
|
})(i);
|
|
}
|
|
})();
|
|
|
|
// 通过关系找称呼
|
|
(function(){
|
|
var $module = document.querySelector('.mod-panel');
|
|
var $panel = $module.querySelector('.c-panel:nth-child(1)');
|
|
var $radio = $panel.querySelectorAll('input[type="radio"]');
|
|
var $sex = $panel.querySelectorAll('input[name="sex"]');
|
|
var $reverse = $panel.querySelectorAll('input[name="reverse"]');
|
|
var $small_btns = $panel.querySelectorAll('.btn-small');
|
|
var $input = $panel.querySelector('textarea[name="input"]');
|
|
var $result = $panel.querySelector('textarea[name="result"]');
|
|
var toggleSex = function(sex){
|
|
if(sex){ //男女判断
|
|
$small_btns[2].disabled=true;
|
|
$small_btns[3].disabled=false;
|
|
}else{
|
|
$small_btns[2].disabled=false;
|
|
$small_btns[3].disabled=true;
|
|
}
|
|
}
|
|
var count = function(){
|
|
var value = $input.value.trim();
|
|
if(value){
|
|
var sex = $sex[0].checked?1:0;
|
|
var reverse = !$reverse[0].checked;
|
|
var result = relationship({text:value,sex:sex,reverse:reverse});
|
|
$result.value = '';
|
|
if(result.length){
|
|
$result.value = result.join('\n');
|
|
}else{
|
|
$result.value = '貌似他/她跟你不是很熟哦!';
|
|
}
|
|
}else{
|
|
$result.value = '';
|
|
}
|
|
};
|
|
var bindChange = function(){
|
|
var value = $input.value.trim();
|
|
var name = value.split('的').pop();
|
|
if(!name){
|
|
toggleSex($sex[0].checked);
|
|
}else{
|
|
toggleSex('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
|
|
}
|
|
};
|
|
|
|
for(var i=0;i<$small_btns.length;i++){
|
|
$small_btns[i].onclick = function(){
|
|
var value = $input.value.trim();
|
|
var name = this.getAttribute('data-value');
|
|
if(value){
|
|
$input.value= value+'的'+name;
|
|
}else{
|
|
$input.value= name;
|
|
}
|
|
toggleSex('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
|
|
}
|
|
}
|
|
for(var i=0;i<$radio.length;i++){
|
|
$radio[i].onchange=function(){
|
|
toggleSex($sex[0].checked);
|
|
if($result.value){
|
|
count();
|
|
}
|
|
}
|
|
}
|
|
var hander = null;
|
|
$input.addEventListener('paste',function(){
|
|
hander&&clearTimeout(bindChange,250);
|
|
hander = setTimeout(bindChange,250);
|
|
});
|
|
$input.addEventListener('input',function(){
|
|
hander&&clearTimeout(bindChange,250);
|
|
hander = setTimeout(bindChange,250);
|
|
});
|
|
$panel.querySelector('.btn-orange').addEventListener('click',function(){
|
|
var value = $input.value.trim();
|
|
var index = value.lastIndexOf('的');
|
|
index = Math.max(0,index);
|
|
var search = value.substr(0,index);
|
|
$input.value = search;
|
|
$result.value = '';
|
|
var name = search.split('的').pop();
|
|
if(!name){
|
|
toggleSex($sex[0].checked);
|
|
}else{
|
|
toggleSex('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
|
|
}
|
|
});
|
|
$panel.querySelector('.btn-red').addEventListener('click',function(){
|
|
$result.value = $input.value = '';
|
|
toggleSex($sex[0].checked);
|
|
});
|
|
$panel.querySelector('.btn-green').addEventListener('click',count);
|
|
|
|
toggleSex($sex[0].checked);
|
|
})();
|
|
|
|
// 通过称呼找关系
|
|
(function(){
|
|
var $module = document.querySelector('.mod-panel');
|
|
var $panel = $module.querySelector('.c-panel:nth-child(2)');
|
|
var $radio = $panel.querySelectorAll('input[type="radio"]');
|
|
var $input = $panel.querySelector('input[name="input"]');
|
|
var $result = $panel.querySelector('textarea[name="result"]');
|
|
var count = function(){
|
|
var value = $input.value.trim();
|
|
if(value){
|
|
var result = relationship({text:value,type:'chain'});
|
|
if(result.length){
|
|
$result.value = result.join('\n');
|
|
}else{
|
|
$result.value = '貌似他/她跟你不是很熟哦!';
|
|
}
|
|
}else{
|
|
$result.value = '';
|
|
}
|
|
};
|
|
$panel.querySelector('.btn-red').onclick = function(){
|
|
$result.value = $input.value = '';
|
|
};
|
|
$panel.querySelector('.btn-green').onclick = count;
|
|
})();
|
|
|
|
// 任意两者间称呼
|
|
(function(){
|
|
var $module = document.querySelector('.mod-panel');
|
|
var $panel = $module.querySelector('.c-panel:nth-child(3)');
|
|
var $radio = $panel.querySelectorAll('input[type="radio"]');
|
|
var $reverse = $panel.querySelectorAll('input[name="reverse2"]');
|
|
var $person = $panel.querySelector('input[name="person"]');
|
|
var $target = $panel.querySelector('input[name="target"]');
|
|
var $result = $panel.querySelector('textarea[name="result"]');
|
|
var count = function(){
|
|
var person = $person.value.trim();
|
|
var target = $target.value.trim();
|
|
if(person){
|
|
var reverse = !$reverse[1].checked;
|
|
var result = relationship({text:person,reverse:reverse,target:target});
|
|
if(result.length){
|
|
$result.value = result.join('\n');
|
|
}else{
|
|
$result.value = '他们貌似不是很熟哦!';
|
|
}
|
|
}else{
|
|
$result.value = '';
|
|
}
|
|
};
|
|
for(var i=0;i<$radio.length;i++){
|
|
$radio[i].onchange=function(){
|
|
if($result.value){
|
|
count();
|
|
}
|
|
}
|
|
}
|
|
$panel.querySelector('.btn-red').onclick = function(){
|
|
$result.value = $person.value = $target.value = '';
|
|
};
|
|
$panel.querySelector('.btn-green').onclick = count;
|
|
})();
|
|
</script>
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<div style="display: none;">
|
|
<script src="https://s95.cnzz.com/z_stat.php?id=1258310068&web_id=1258310068"></script>
|
|
</div>
|
|
<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>
|