646 lines
25 KiB
HTML
646 lines
25 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="bd">
|
|
<span class="language">
|
|
<a href="/relationship/">简体</a>
|
|
<span>/</span>
|
|
<a class="active" 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>
|
|
</div>
|
|
<div class="container">
|
|
<div class="mod-panel">
|
|
<div class="inner">
|
|
<div class="hd">
|
|
<h1><span class="name">中國</span><span>親戚關系計算器</span><span class="tag">開源算法</span></h1>
|
|
<p>逢年過節遇到三姑六婆，拒絕叫不出口的尷尬！輕鬆搞定親戚關系～</p>
|
|
<p>當前親戚稱呼大全已收錄約<b id="count">-</b>條親戚關系</p>
|
|
<div class="picture">
|
|
<img src="image/app.png" width="320" alt="親戚稱呼換算APP"/>
|
|
<a class="btn" href="/relationship/vue/" target="_blank">訪問手機版</a>
|
|
</div>
|
|
</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>
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-intro">
|
|
<div class="inner">
|
|
<div class="hd"><span>功能支持</span></div>
|
|
<div class="bd">
|
|
<ul>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q">1. 使用別稱查詢：</p>
|
|
<p class="a">姥姥的爸爸的老竇 = 外曾外曾祖父</p>
|
|
<p class="a">娘子的爹地的母親 = 祖嶽母</p>
|
|
<p class="a">嶽丈的媽咪的細佬 = 舅祖嶽父</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q">2. 使用合稱查詢：</p>
|
|
<p class="a">姐夫的雙親 = 姊妹姻父 / 姊妹姻母</p>
|
|
<p class="a">媽媽的祖父母 = 外曾祖父 / 外曾祖母</p>
|
|
<p class="a">弟弟的孩子 = 侄子 / 侄女</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q">3. 大小數字混合查詢：</p>
|
|
<p class="a">大哥的二姑媽的七舅姥爺 = 舅曾外祖父</p>
|
|
<p class="a">二女婿的小姨 = 女姻姨妹</p>
|
|
<p class="a">大佬的三舅公的次子 = 舅表伯父 / 舅表叔父</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q">4. 不限制祖輩孫輩跨度查詢：</p>
|
|
<p class="a">舅媽的婆婆的外甥的姨媽的侄子 = 舅表舅父</p>
|
|
<p class="a">老公的丈母娘的兒媳 = 嫂子、弟妹</p>
|
|
<p class="a">外婆的孫子的爸爸的仔 = 舅表哥、舅表弟</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q">5. 根據年齡推導可能性：</p>
|
|
<p class="a">哥哥的表姐 = 姑表姐、舅表姐</p>
|
|
<p class="a">堂妹的姐姐 = 堂姐、堂妹</p>
|
|
<p class="a">弟弟的表哥 = 姑表哥、姑表弟、舅表哥、舅表弟</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">
|
|
<p class="q">6. 根據語境確認性別：</p>
|
|
<p class="a">老婆的女兒的外婆 = 嶽母</p>
|
|
<p class="a">愛人的婆婆的兒子 = 兄弟</p>
|
|
<p class="a">嶽母的配偶的兒子的爸爸 = 嶽父</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-article">
|
|
<div class="inner">
|
|
<div class="bd">
|
|
<p>親屬是基於婚姻、血緣和法律擬制而形成的社會關系。親屬關系包括夫妻、父母、子女、兄弟姊妹、祖父母和外祖父母、孫子女和外孫子女、兒媳和公婆、女婿和嶽父母、以及其他三代以內的旁系血親，如伯、叔、姑、舅、姨、侄子女、甥子女、堂兄弟姊妹、表兄弟姊妹等。</p>
|
|
<p>親屬稱謂指是以本人爲中心確定親族成員和本人關系的名稱，是基於血親姻親基礎上的親屬之間相互稱呼的名稱、叫法。漢族的家族親屬關系條理分明尊卑有序：比自己長一輩的稱呼有姨姑舅叔伯，同輩的有兄弟姊妹、堂表親等等，下一輩有甥侄等等。中國人由於姻親而產生的親戚關系相當龐雜，“祖宗十八代”“五服”“九族”讓人難以區分，其派生出的各種稱謂也是中華文化的一大特征。</p>
|
|
<p>如今由於工作生活節奏差異，很多關系稍疏遠的親戚之間來往並不多，年齡差異長幼輩分模糊。春節拜年走親戚遇到七大姑八大姨，往往會搞不清楚哪位親戚應該喊什麼稱呼，很是尷尬。不僅小孩搞不清親戚關系和親戚稱謂，就連年輕一代的大人也都常常模糊混亂。</p>
|
|
<p>“中國親戚關系計算器”爲你避免了叫錯、不會叫親戚的尷尬，收錄了中國親戚關系稱呼大全，只需簡單的輸入即可完成稱呼計算。稱呼計算器同時兼容了不同地域的方言叫法，你可以稱呼父親爲：“老爸”、“爹地”、“老爺子”等等。讓您準確的叫出親戚稱謂，理清親屬之間的親戚關系，輕鬆掌握中國式的親戚關系換算，讓你更了解中國文化。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-copy">
|
|
<div class="inner">
|
|
<div class="hd"><span>算法開源</span></div>
|
|
<div class="bd">
|
|
<p><span>本程序基於 <a href="https://github.com/mumuy/relationship/blob/master/LICENSE" rel="nofollow" target="_blank">MIT許可協議</a> 開源，除需在源碼中保留版權信息和許可聲明外，你有權利進行使用、復制、修改、合並、出版發行等</span></p>
|
|
<p><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-app">
|
|
<div class="inner">
|
|
<div class="hd"><span>他們都在用</span></div>
|
|
<div class="bd">
|
|
<ul>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="image/icon/miui.png" width="64" height="64"/></span>
|
|
<span class="name">小米計算器</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="image/icon/quanneng.png" width="64" height="64"/></span>
|
|
<span class="name">全能計算器</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="image/icon/yuwendaren.png" width="64" height="64"/></span>
|
|
<span class="name">有道語文達人</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="app">
|
|
<span class="icon"><img src="image/icon/qinqi.png" width="64" height="64"/></span>
|
|
<span class="name">親戚計算器</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-foot">
|
|
<div class="inner">
|
|
<div class="bd">
|
|
<div class="box">
|
|
<p><img src="image/qrcode.jpg" width="150" alt="親戚關系微信小程序"/></p>
|
|
<p>微信掃一掃，使用小程序</p>
|
|
</div>
|
|
<p>Copyright © <a href="http://passer-by.com">passer-by.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="dist/relationship.zh-HK.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 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 isFamen = input_result.every(function(value){
|
|
return value.split('的').shift()=='老公';
|
|
});
|
|
if(isFamen){
|
|
$sex[1].checked = true;
|
|
}else{
|
|
$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 $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 || [];
|
|
(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>
|