updated 添加繁体支持
This commit is contained in:
291
index.html
291
index.html
@@ -10,7 +10,7 @@
|
||||
<meta http-equiv="Cache-Control" content="no-transform" />
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<title>中国亲戚关系计算器 亲戚称谓计算器 亲戚称呼大全</title>
|
||||
<meta name="keywords" content="家庭称谓,亲戚称呼,亲戚称谓,亲戚叫法,亲属关系,亲属称谓,关系计算器,亲戚计算器,称呼计算器,称谓计算器,辈分计算器,親戚關係稱呼,親戚稱呼計算機,亲戚关系大全,亲戚称呼大全"/>
|
||||
<meta name="keywords" content="家庭称谓,亲戚称呼,亲戚称谓,亲戚叫法,亲属关系,亲属称谓,关系计算器,亲戚计算器,称呼计算器,称谓计算器,辈分计算器,亲戚关系大全,亲戚称呼大全"/>
|
||||
<meta name="description" content="中国亲戚关系计算器是一款最为全面准确的亲戚称呼计算器及亲戚关系在线查询工具,逢年过节走亲访友必备神器,亦可作为家庭启蒙教育应用。"/>
|
||||
<link rel="stylesheet" href="style/index.css">
|
||||
<script type="text/javascript">
|
||||
@@ -28,8 +28,12 @@
|
||||
<div class="header">
|
||||
<div class="inner">
|
||||
<div class="mod-head">
|
||||
<div class="hd"><span class="tag">开源算法</span></div>
|
||||
<div class="bd">
|
||||
<span class="language">
|
||||
<a class="active" href="/index.html">简体</a>
|
||||
<span>/</span>
|
||||
<a href="/zh-HK.html">繁體</a>
|
||||
</span>
|
||||
<a class="btn" href="/relationship/vue/" target="_blank">手机版</a>
|
||||
<a class="btn" href="https://github.com/mumuy/relationship/" rel="nofollow" target="_blank" title="Github">
|
||||
<svg aria-hidden="true" class="octicon" height="20" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
|
||||
@@ -44,7 +48,7 @@
|
||||
<div class="inner">
|
||||
<div class="mod-panel">
|
||||
<div class="hd">
|
||||
<h1>中国亲戚关系计算器</h1>
|
||||
<h1>中国亲戚关系计算器<span class="tag">开源算法</span></h1>
|
||||
<p>逢年过节遇到三姑六婆,拒绝叫不出口的尴尬!轻松搞定亲戚关系~</p>
|
||||
<p>当前亲戚称呼大全已收录约<b id="count">-</b>条亲戚关系</p>
|
||||
</div>
|
||||
@@ -143,7 +147,7 @@
|
||||
<p class="a">舅妈的婆婆的外甥的姨妈的侄子的爷爷 / 老公的丈母娘的儿媳</p>
|
||||
<p class="q">5. 年龄推导:</p>
|
||||
<p class="a">哥哥的表姐 = 姑表姐、舅表姐</p>
|
||||
<p class="a">堂妹的姐姐 = 堂姐、堂妹</p>
|
||||
<p class="a">堂妹的姐姐 = 堂姐妹</p>
|
||||
<p class="a">弟弟的表哥 = 姑表兄弟、舅表兄弟</p>
|
||||
<p class="q">6. 根据语境确认性别:</p>
|
||||
<p class="a">老婆的女儿的外婆 = 岳母</p>
|
||||
@@ -253,8 +257,283 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="script/relationship.js"></script>
|
||||
<script type="text/javascript" src="script/index.js"></script>
|
||||
<script type="text/javascript" src="dist/relationship.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
// 获取数量
|
||||
document.getElementById('count').innerText = relationship.dataCount;
|
||||
|
||||
// 自定义模式
|
||||
relationship.setMode('cantonese',{
|
||||
'f':['阿爸'],
|
||||
'f,f':['阿爷'],
|
||||
'f,f,f':['太公'],
|
||||
'f,f,m':['太婆'],
|
||||
'f,m':['阿嫲'],
|
||||
'f,m,f':['太外公'],
|
||||
'f,m,m':['太外婆'],
|
||||
'f,ob':['大伯'],
|
||||
'f,ob,w':['伯娘'],
|
||||
'f,lb':['阿叔'],
|
||||
'f,lb,w':['阿婶'],
|
||||
'0,f,xb,d,s':['堂姨甥'],
|
||||
'1,f,xb,d,s':['堂外甥'],
|
||||
'0,f,xb,d,d':['堂姨甥女'],
|
||||
'1,f,xb,d,d':['堂外甥女'],
|
||||
'f,os':['姑妈'],
|
||||
'f,ls':['姑姐'],
|
||||
'f,xs,h':['姑丈'],
|
||||
'0,f,xs,d,s':['姑表姨甥'],
|
||||
'1,f,xs,d,s':['姑表外甥'],
|
||||
'0,f,xs,d,d':['姑表姨甥女'],
|
||||
'1,f,xs,d,d':['姑表外甥女'],
|
||||
'm':['阿妈','老母'],
|
||||
'm,f':['阿公'],
|
||||
'm,f,f':['外太公'],
|
||||
'm,f,m':['外太婆'],
|
||||
'm,m':['阿婆'],
|
||||
'm,m,f':['外太外公'],
|
||||
'm,m,m':['外太外婆'],
|
||||
'm,ob':['舅父'],
|
||||
'm,lb':['舅仔'],
|
||||
'm,xb,w':['舅母'],
|
||||
'0,m,xb,d,s':['舅表姨甥'],
|
||||
'1,m,xb,d,s':['舅表外甥'],
|
||||
'0,m,xb,d,d':['舅表姨甥女'],
|
||||
'1,m,xb,d,d':['舅表外甥女'],
|
||||
'm,os':['姨妈'],
|
||||
'm,ls':['姨仔'],
|
||||
'm,xs,h':['姨丈'],
|
||||
'0,m,xb,d,s':['姨姨甥'],
|
||||
'1,m,xb,d,s':['姨外甥'],
|
||||
'0,m,xb,d,d':['姨姨甥女'],
|
||||
'1,m,xb,d,d':['姨外甥女'],
|
||||
'ob':['阿哥'],
|
||||
'ob,w':['阿嫂'],
|
||||
'lb':['阿弟','细佬'],
|
||||
'lb,w':['弟妇'],
|
||||
'xb,s':['侄'],
|
||||
'xb,d':['侄女'],
|
||||
'os':['阿姐'],
|
||||
'os,w':['姐夫'],
|
||||
'ls':['阿妹'],
|
||||
'ls,w':['妹夫'],
|
||||
'0,xs,s':['姨甥'],
|
||||
'1,xs,s':['外甥'],
|
||||
'0,xs,d':['姨甥女'],
|
||||
'1,xs,d':['外甥女'],
|
||||
's':['仔'],
|
||||
's,w':['新妇'],
|
||||
's,s':['孙'],
|
||||
's,s,w':['孙新妇'],
|
||||
's,s,s':['息仔'],
|
||||
's,s,d':['息女'],
|
||||
's,d':['孙女'],
|
||||
's,d,h':['孙女婿'],
|
||||
's,d,s':['外息仔'],
|
||||
's,d,d':['外息女'],
|
||||
'd':['女'],
|
||||
'd,s':['外孙'],
|
||||
'd,s,w':['外孙新妇'],
|
||||
'd,s,s':['外息仔'],
|
||||
'd,s,d':['外息女'],
|
||||
'd,d':['外孙女'],
|
||||
'd,d,h':['外孙女婿'],
|
||||
'd,d,s':['外息仔'],
|
||||
'd,d,d':['外息女'],
|
||||
});
|
||||
|
||||
// 标签页
|
||||
(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 $mode = $panel.querySelectorAll('input[name="mode"]');
|
||||
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 mode = $mode[0].checked?$mode[0].value:$mode[1].value;
|
||||
var reverse = !$reverse[0].checked;
|
||||
var result = relationship({text:value,sex:sex,reverse:reverse,mode:mode});
|
||||
$result.value = '';
|
||||
if(result.length){
|
||||
$result.value = result.join('\n');
|
||||
}else{
|
||||
$result.value = '貌似他/她跟你不是很熟哦!';
|
||||
}
|
||||
}else{
|
||||
$result.value = '';
|
||||
}
|
||||
};
|
||||
var bindChange = function(){
|
||||
var value = $input.value.trim();
|
||||
if(value){
|
||||
var result = relationship({text:value.split('的')[0],sex:-1,type:'chain'});
|
||||
if(result.length){
|
||||
var first_name = result[0].split('的').shift();
|
||||
var name = result[0].split('的').pop();
|
||||
if(first_name=='老公'){
|
||||
$sex[1].checked = true;
|
||||
}else if(first_name=='老婆'){
|
||||
$sex[0].checked = true;
|
||||
}
|
||||
if(!name){
|
||||
toggleSex($sex[0].checked);
|
||||
}else{
|
||||
toggleSex('爸爸,老公,儿子,哥哥,弟弟,兄弟'.indexOf(name)>-1);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
$result.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
|
||||
Reference in New Issue
Block a user