159 lines
5.7 KiB
HTML
159 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>中国家庭称谓计算器</title>
|
||
<meta name="keywords" content="过年走亲访友,拜年神器">
|
||
<meta name="description" content="">
|
||
<link rel="stylesheet" href="style/index.css">
|
||
</head>
|
||
<body>
|
||
<div class="wrapper">
|
||
<div class="container">
|
||
<div class="content">
|
||
<div class="mod-panel">
|
||
<div class="hd"><h1>中国家庭称谓计算器</h1></div>
|
||
<div class="bd">
|
||
<p>我的性别：
|
||
<label for="male"><input id="male" type="radio" name="sex" value="1" checked>男</label>
|
||
<label for="female"><input id="female" type="radio" name="sex" value="0">女</label>
|
||
</p>
|
||
<p>计算类型：
|
||
<label for="default"><input id="default" type="radio" name="type" value="default" checked>找称呼</label>
|
||
<label for="chain"><input id="chain" type="radio" name="type" value="chain">找关系</label>
|
||
</p>
|
||
<p>称呼方式：
|
||
<label for="call"><input id="call" type="radio" name="reverse" value="0" checked>我称呼对方</label>
|
||
<label for="called"><input id="called" type="radio" name="reverse" value="1">对方称呼我</label>
|
||
</p>
|
||
<p>
|
||
<textarea id="input" placeholder="人物间用'的'字分开…"></textarea>
|
||
</p>
|
||
<p>
|
||
<span>
|
||
<button class="btn" data-value="爸爸">父</button>
|
||
<button class="btn" data-value="妈妈">母</button>
|
||
</span>
|
||
<span>
|
||
<button class="btn" data-value="老公">夫</button>
|
||
<button class="btn" data-value="老婆">妻</button>
|
||
</span>
|
||
<span>
|
||
<button class="btn" data-value="儿子">子</button>
|
||
<button class="btn" data-value="女儿">女</button>
|
||
</span>
|
||
<span>
|
||
<button class="btn" data-value="哥哥">兄</button>
|
||
<button class="btn" data-value="弟弟">弟</button>
|
||
</span>
|
||
<span>
|
||
<button class="btn" data-value="姐姐">姐</button>
|
||
<button class="btn" data-value="妹妹">妹</button>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<button class="input-button">回退</button>
|
||
<button class="input-button">清空</button>
|
||
<button class="input-button">计算</button>
|
||
</p>
|
||
<p>计算结果：</p>
|
||
<p>
|
||
<textarea id="reslut" readonly></textarea>
|
||
</p>
|
||
</div>
|
||
<div class="ft">
|
||
<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">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">Star</a></p>
|
||
<p>android版下载：<a href="http://passer-by.com/relationship/app.html" target="_blank">三姑六婆计算器</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="script/common.js"></script>
|
||
<script src="script/relationship.js"></script>
|
||
<script>
|
||
(function(){
|
||
var $sex = document.getElementsByName('sex');
|
||
var $type = document.getElementsByName('type');
|
||
var $reverse = document.getElementsByName('reverse');
|
||
var $radio = document.getElementsByTagName('INPUT');
|
||
var $textarea = document.getElementsByTagName('TEXTAREA');
|
||
var $btns = DOMUtil.getElementsByClassName('btn');
|
||
var $buttons = DOMUtil.getElementsByClassName('input-button');
|
||
var toggle = function(sex){
|
||
if(sex){ //男女判断
|
||
$btns[2].disabled=true;
|
||
$btns[3].disabled=false;
|
||
}else{
|
||
$btns[2].disabled=false;
|
||
$btns[3].disabled=true;
|
||
}
|
||
}
|
||
var count = function(){
|
||
var value = $textarea[0].value.trim();
|
||
if(value){
|
||
var sex = $sex[0].checked?1:0;
|
||
var type = $type[0].checked?'default':'chain';
|
||
var reverse = !$reverse[0].checked;
|
||
var result = relationship({text:value,sex:sex,reverse:reverse,type:type});
|
||
$textarea[1].value = '';
|
||
if(result.length){
|
||
$textarea[1].value = result.join('\n');
|
||
}else{
|
||
$textarea[1].value = '貌似他/她跟你不是很熟哦!';
|
||
}
|
||
}else{
|
||
$textarea[1].value = '';
|
||
}
|
||
}
|
||
|
||
for(var i=0;i<$btns.length;i++){
|
||
$btns[i].onclick = function(){
|
||
var value = $textarea[0].value.trim();
|
||
var name = this.getAttribute('data-value');
|
||
if(value){
|
||
$textarea[0].value= value+'的'+name;
|
||
}else{
|
||
$textarea[0].value= name;
|
||
}
|
||
toggle('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
|
||
}
|
||
}
|
||
for(var i=0;i<$radio.length;i++){
|
||
$radio[i].onchange=function(){
|
||
toggle($sex[0].checked);
|
||
if($textarea[1].value){
|
||
count();
|
||
}
|
||
}
|
||
}
|
||
$buttons[0].onclick = function(){
|
||
var value = $textarea[0].value.trim();
|
||
var index = value.lastIndexOf('的');
|
||
index = Math.max(0,index);
|
||
var search = value.substr(0,index);
|
||
$textarea[0].value = search;
|
||
$textarea[1].value = '';
|
||
var name = search.split('的').pop();
|
||
if(!name){
|
||
toggle($sex[0].checked);
|
||
}else{
|
||
toggle('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
|
||
}
|
||
}
|
||
$buttons[1].onclick = function(){
|
||
$textarea[1].value = $textarea[0].value = '';
|
||
toggle($sex[0].checked);
|
||
}
|
||
$buttons[2].onclick = count;
|
||
|
||
toggle($sex[0].checked);
|
||
})();
|
||
</script>
|
||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||
</body>
|
||
</html>
|