821 lines
51 KiB
HTML
821 lines
51 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"/>
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<title>中国亲戚关系计算器 亲戚称谓计算器 亲戚称呼大全</title>
|
|
<meta name="keywords" content="家庭称谓,亲戚称呼,亲戚称谓,亲戚叫法,亲属关系,亲属称谓,关系计算器,亲戚计算器,称呼计算器,称谓计算器,辈分计算器,亲戚关系大全,亲戚称呼大全"/>
|
|
<meta name="description" content="中国亲戚关系计算器是一款最为全面准确的亲戚称呼计算器及亲戚关系在线查询工具，逢年过节走亲访友必备神器，亦可作为家庭启蒙教育应用。"/>
|
|
<link rel="canonical" href="https://passer-by.com/relationship/"/>
|
|
<link rel="stylesheet" href="static/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="scroll-container">
|
|
<header>
|
|
<div class="mod-head">
|
|
<div class="inner">
|
|
<div class="bd">
|
|
<span class="language">
|
|
<a class="active" href="/relationship/">简体</a>
|
|
<span>/</span>
|
|
<a href="zh-HK.html">繁體</a>
|
|
</span>
|
|
<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>
|
|
<span>Github</span>
|
|
</a>
|
|
<a class="btn" href="/">个人网站</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="scroll-item">
|
|
<div class="mod-bg">
|
|
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
<defs>
|
|
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
|
|
</defs>
|
|
<g class="parallax">
|
|
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
|
|
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
|
|
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
|
|
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="module mod-panel">
|
|
<div class="inner">
|
|
<div class="bd">
|
|
<div class="panel-left">
|
|
<h1><span class="name">中国</span><span>亲戚关系计算器</span><span class="tag">开源算法</span></h1>
|
|
<p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p>
|
|
<p>当前亲戚称呼大全已收录约<b id="count">-</b>条亲戚关系</p>
|
|
<p class="text-gray">始于2016年3月</p>
|
|
<div class="picture">
|
|
<img src="static/image/app.png" width="512" height="320" alt="亲戚称呼换算APP"/>
|
|
</div>
|
|
<div class="mobile">
|
|
<a class="btn" href="vue/" target="_blank">
|
|
<span class="name">访问手机版</span>
|
|
<span class="qrcode">
|
|
<img src="static/image/qrcode.png"/>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-right">
|
|
<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>
|
|
<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="north">
|
|
<span>北方地区</span>
|
|
</label>
|
|
<label for="field-0-3">
|
|
<input id="field-0-3" type="radio" name="mode" value="guangdong">
|
|
<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>
|
|
<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-3 btn-orange">回退</button>
|
|
<button class="btn btn-3 btn-red">清空</button>
|
|
<button class="btn btn-3 btn-green">计算</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<p>计算结果：</p>
|
|
<p><textarea name="result" readonly></textarea></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 text-right">
|
|
<label for="field-3-0">
|
|
<input id="field-3-0" type="checkbox" name="optimal" value="1" checked>
|
|
<span>最短关系</span>
|
|
</label>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="c-panel">
|
|
<div class="row text-right">
|
|
<label for="field-4-0">
|
|
<input id="field-4-0" type="checkbox" name="optimal" value="1" checked>
|
|
<span>最短关系</span>
|
|
</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="field">
|
|
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="field" style="text-align:center;">
|
|
<span>+</span>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="scroll-item">
|
|
<div class="module mod-intro">
|
|
<div class="inner">
|
|
<div class="hd"><span>功能支持</span></div>
|
|
<div class="bd">
|
|
<ul>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>1.</strong> 使用别称查询：</p>
|
|
<p class="a">姥姥的爸爸的老窦 = 外曾外曾祖父</p>
|
|
<p class="a">娘子的爹地的母亲 = 祖岳母</p>
|
|
<p class="a">岳丈的妈咪的细佬 = 舅祖岳父</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>2.</strong> 使用合称查询：</p>
|
|
<p class="a">姐夫的双亲 = 姊妹姻父 / 姊妹姻母</p>
|
|
<p class="a">妈妈的祖父母 = 外曾祖父 / 外曾祖母</p>
|
|
<p class="a">弟弟的孩子 = 侄子 / 侄女</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>3.</strong> 大小数字混合查询：</p>
|
|
<p class="a">大哥的二姑妈的七舅姥爷 = 舅曾外祖父</p>
|
|
<p class="a">二女婿的小姨 = 女姻姨妹</p>
|
|
<p class="a">大佬的三叔的次子 = 堂哥 / 堂弟</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>4.</strong> 不限制祖辈孙辈跨度查询：</p>
|
|
<p class="a">舅妈的婆婆的外甥的姨妈的侄子 = 舅表舅父</p>
|
|
<p class="a">老公的丈母娘的儿媳 = 嫂子 / 弟妹</p>
|
|
<p class="a">外婆的孙子的爸爸的仔 = 舅表哥 / 舅表弟</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>5.</strong> 根据年龄推导可能性：</p>
|
|
<p class="a">哥哥的表姐 = 姑表姐 / 舅表姐</p>
|
|
<p class="a">堂妹的姐姐 = 堂姐 / 堂妹</p>
|
|
<p class="a">弟弟的表哥 = 姑表哥 / 姑表弟 / 舅表哥 / 舅表弟</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>6.</strong> 根据语境确认性别：</p>
|
|
<p class="a">老婆的女儿的外婆 = 岳母</p>
|
|
<p class="a">爱人的婆婆的儿子 = 哥哥 / 弟弟 / 自己</p>
|
|
<p class="a">岳母的配偶的儿子的爸爸 = 岳父</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>7.</strong> 支持古文式表达：</p>
|
|
<p class="a">吾父之舅父 = 舅爷爷</p>
|
|
<p class="a">母之兄长之妻 = 大舅妈</p>
|
|
<p class="a">泰山之高堂 = 祖岳父 / 祖岳母</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>8.</strong> 解析某称谓关系链：</p>
|
|
<p class="a">七舅姥爷 = 妈妈的妈妈的兄弟</p>
|
|
<p class="a">姑奶奶 = 爸爸的爸爸的姐妹</p>
|
|
<p class="a">外太公 = 妈妈的爸爸的爸爸</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q"><strong>9.</strong> 算两个亲戚间的合称关系：</p>
|
|
<p class="a">奶奶 + 外婆 = 儿女亲家</p>
|
|
<p class="a">妈妈 + 婶婶 = 妯娌</p>
|
|
<p class="a">岳父 + 我 = 翁婿</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="scroll-item">
|
|
<div class="module mod-feature">
|
|
<div class="inner">
|
|
<div class="bd">
|
|
<ul class="nav">
|
|
<li>
|
|
<p class="title">完整的亲戚关系数据</p>
|
|
<p class="desc">收录前后多代血亲及姻亲关系数据</p>
|
|
</li>
|
|
<li>
|
|
<p class="title">简单易读的数据格式</p>
|
|
<p class="desc">独创的关系数据结构方便数据查找</p>
|
|
</li>
|
|
<li>
|
|
<p class="title">高效全面的网络解析</p>
|
|
<p class="desc">算法解析包含了网络中的各个节点</p>
|
|
</li>
|
|
<li>
|
|
<p class="title">自定义地域称呼功能</p>
|
|
<p class="desc">让你可以定制符合自己习惯的版本</p>
|
|
</li>
|
|
</ul>
|
|
<div class="panels">
|
|
<div class="panel">
|
|
<img src="./static/image/draw/1.svg" height="320">
|
|
<span class="slogan">包含了数万条亲戚关系及称呼</span>
|
|
</div>
|
|
<div class="panel">
|
|
<img src="./static/image/draw/2.svg" height="320">
|
|
<span class="slogan">拥有小巧而极致的亲戚数据库</span>
|
|
</div>
|
|
<div class="panel">
|
|
<img src="./static/image/draw/3.svg" height="320">
|
|
<span class="slogan">不再错过任何一种可能的关系</span>
|
|
</div>
|
|
<div class="panel">
|
|
<img src="./static/image/draw/4.svg" height="320">
|
|
<span class="slogan">亲戚该怎么称呼全由自己做主</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="scroll-item">
|
|
<div class="module mod-article">
|
|
<div class="inner">
|
|
<div class="banner">
|
|
<span>外甥</span>
|
|
<span>姑姑</span>
|
|
<span>岳父</span>
|
|
<span>女儿</span>
|
|
<span>舅舅</span>
|
|
<span>姨妈</span>
|
|
<span>媳妇儿</span>
|
|
<span>爸爸</span>
|
|
<span>表姐</span>
|
|
<span>曾祖母</span>
|
|
<span>哥哥</span>
|
|
<span>妯娌</span>
|
|
<span>姑奶奶</span>
|
|
<span>老公</span>
|
|
<span>弟妹</span>
|
|
<span>堂姐</span>
|
|
<span>婶婶</span>
|
|
<span>女婿</span>
|
|
<span>叔叔</span>
|
|
<span>婆婆</span>
|
|
<span>小舅子</span>
|
|
<span>伯父</span>
|
|
<span>姻兄弟</span>
|
|
<span>丈母娘</span>
|
|
<span>外公</span>
|
|
<span>侄子</span>
|
|
<span>舅爷</span>
|
|
<span>表妹</span>
|
|
<span>嫂子</span>
|
|
<span>姥爷</span>
|
|
<span>连襟</span>
|
|
<span>爷爷</span>
|
|
<span>姐夫</span>
|
|
<span>姑子</span>
|
|
<span>弟弟</span>
|
|
<span>亲家</span>
|
|
<span>孙子</span>
|
|
<span>姑丈公</span>
|
|
</div>
|
|
<div class="hd"><span>关于中国亲戚称呼</span></div>
|
|
<div class="bd">
|
|
<p>亲属是基于婚姻、血缘和法律拟制而形成的社会关系。亲属关系包括夫妻、父母、子女、兄弟姊妹、祖父母和外祖父母、孙子女和外孙子女、儿媳和公婆、女婿和岳父母、以及其他三代以内的旁系血亲，如伯、叔、姑、舅、姨、侄子女、甥子女、堂兄弟姊妹、表兄弟姊妹、姨兄弟姊妹等。</p>
|
|
<p>亲属称谓指是以本人为中心确定亲族成员和本人关系的名称，是基于血亲姻亲基础上的亲属之间相互称呼的名称、叫法。汉族的家族亲属关系条理分明尊卑有序：比自己长一辈的称呼有姨姑舅叔伯，同辈的有兄弟姊妹、堂表亲等等，下一辈有甥侄等等。中国人由于姻亲而产生的亲戚关系相当庞杂，“祖宗十八代”、“五服”、“六亲”、“九族”让人难以区分，其派生出的各种称谓也是中华文化的一大特征。</p>
|
|
<p>如今由于工作生活节奏差异，很多关系稍疏远的亲戚之间来往并不多，年龄差异长幼辈分模糊。春节拜年走亲戚遇到七大姑八大姨，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。不仅小孩搞不清亲戚关系和亲戚称谓，就连年轻一代的大人也都常常模糊混乱。</p>
|
|
<p>“中国亲戚关系计算器”为你避免了叫错、不会叫亲戚的尴尬，收录了中国亲戚关系称呼大全，只需简单的输入即可完成称呼计算。称呼计算器同时兼容了不同地域的方言叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等。让您准确的叫出亲戚称谓，理清亲属之间的亲戚关系，轻松掌握中国式的亲戚关系换算，让你更了解中国文化。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="scroll-item">
|
|
<div class="module mod-copy">
|
|
<div class="inner">
|
|
<div class="hd"><span>算法开源</span></div>
|
|
<div class="bd">
|
|
<p>本项目致力于让更多人了解中国传统文化，学习各式各样的中国亲戚称谓。本人深感项目的完善仅凭一己之力是远远不够的，如果你对此感兴趣，欢迎关注本项目 或 <a class="text-blue" href="https://github.com/mumuy/relationship/pulls" target="_blank" rel="nofollow">提交代码</a>，与我一起完善它，使它被更多人熟知和使用。你也可以通过本项目提供的方法和教程，打造更符合自己使用习惯的亲戚计算器版本。</p>
|
|
<p><span>算法基于「<a href="https://github.com/mumuy/relationship/blob/master/LICENSE" rel="nofollow" target="_blank">MIT许可协议</a>」开源，除需在源码中保留版权信息和许可声明外，你有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。</span>算法持续更新中，如发现错漏或有想法建议可在此</span> <a class="text-red" href="https://github.com/mumuy/relationship/issues" rel="nofollow" target="_blank">反馈问题</a>。</p>
|
|
<div class="buttons">
|
|
<a class="github-button" href="https://github.com/mumuy" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="Follow @mumuy on GitHub">Follow @mumuy</a>
|
|
<a class="github-button" href="https://github.com/mumuy/relationship/fork" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork mumuy/relationship on GitHub">Fork</a>
|
|
<a class="github-button" href="https://github.com/mumuy/relationship" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star mumuy/relationship on GitHub">Star</a>
|
|
<a class="github-button" href="https://github.com/mumuy/relationship/archive/HEAD.zip" data-icon="octicon-download" data-size="large" aria-label="Download mumuy/relationship on GitHub">Download</a>
|
|
</div>
|
|
<p>为了及时获取最新最全的亲戚关系数据，建议你直接引用本项目脚本文件：</p>
|
|
<code><script type="text/javascript" src="https://passer-by.com/relationship/dist/relationship.min.js"></script></code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="scroll-item">
|
|
<div class="module mod-app">
|
|
<div class="inner">
|
|
<div class="hd"><span>他们都在使用</span></div>
|
|
<div class="bd">
|
|
<ul>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="static/image/icon/miui.png" width="64" height="64"/></span>
|
|
<span class="name">小米计算器</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="static/image/icon/quanneng.png" width="64" height="64"/></span>
|
|
<span class="name">全能计算器</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="static/image/icon/yuwendaren.png" width="64" height="64"/></span>
|
|
<span class="name">有道语文达人</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="static/image/icon/qinqi.png" width="64" height="64"/></span>
|
|
<span class="name">亲戚计算器</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="module mod-foot">
|
|
<div class="inner">
|
|
<div class="hd"><span>😳支持我的开源</span></div>
|
|
<div class="bd">
|
|
<div class="box">
|
|
<div class="item">
|
|
<img src="static/image/qrcode-wechat.jpg" height="280" alt="微信支付"/>
|
|
</div>
|
|
<div class="item">
|
|
<img src="static/image/qrcode-alipay.jpg" height="280" alt="支付宝支付"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
|
|
<div class="ft">
|
|
<p>Copyright © <a href="http://passer-by.com">passer-by.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-fixedbar">
|
|
<div class="bd">
|
|
<ul>
|
|
<li>
|
|
<a class="qrcode" href="javascript:;" href="javascript:;">
|
|
<img src="static/image/icon-wechat.png" width="24" height="24"/>
|
|
<span class="popup">
|
|
<img src="static/image/qrcode.jpg" width="150" alt="亲戚关系微信小程序"/>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="gotop" href="javascript:;" href="javascript:;">
|
|
<img src="static/image/icon-gotop.png" width="24" height="24"/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script type="text/javascript" src="dist/relationship.min.js"></script>
|
|
<script type="text/javascript" src="dist/relationship-mode.min.js"></script>
|
|
<script type="text/javascript" src="static/script/index.js"></script>
|
|
<script type="text/javascript">
|
|
// 获取数量
|
|
document.getElementById('count').innerText = relationship.dataCount;
|
|
|
|
// 自定义模式
|
|
for(var key in relationshipMode){
|
|
relationship.setMode(key,relationshipMode[key]['data']);
|
|
}
|
|
|
|
// 标签页
|
|
(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 = 'default';
|
|
if($mode[1].checked){
|
|
mode = $mode[1].value;
|
|
}else if($mode[2].checked){
|
|
mode = $mode[2].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 input_result = relationship({text:value.split('的')[0],sex:-1,type:'chain'});
|
|
var output_result = relationship({text:value,sex:-1,type:'chain'});
|
|
if(input_result.length){
|
|
var isFamale = input_result.every(function(value){
|
|
return value.split('的').shift()=='老公';
|
|
});
|
|
var isMale = input_result.every(function(value){
|
|
return value.split('的').shift()=='老婆';
|
|
});
|
|
if(isFamale){
|
|
$sex[1].checked = true;
|
|
}else if(isMale){
|
|
$sex[0].checked = true;
|
|
}
|
|
}
|
|
if(output_result.length){
|
|
var name = output_result[0].split('的').pop();
|
|
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 $optimal = $panel.querySelectorAll('input[name="optimal"]');
|
|
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){
|
|
if($reverse[0].checked){
|
|
var temp = target;
|
|
target = person;
|
|
person = temp;
|
|
}
|
|
var result = relationship({text:person,target:target,optimal:$optimal[0].checked});
|
|
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;
|
|
})();
|
|
|
|
// 两者的称呼
|
|
(function(){
|
|
var $module = document.querySelector('.mod-panel');
|
|
var $panel = $module.querySelector('.c-panel:nth-child(4)');
|
|
var $radio = $panel.querySelectorAll('input[type="radio"]');
|
|
var $optimal = $panel.querySelectorAll('input[name="optimal"]');
|
|
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 result = relationship({text:person,target:target,type:'pair',optimal:$optimal[0].checked});
|
|
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://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script>
|
|
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
|
|
</body>
|
|
</html>
|