120 lines
4.0 KiB
HTML
120 lines
4.0 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>关系：</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="about">
|
|
<p>由于工作生活节奏不同，如今很多关系稍疏远的亲戚之间来往并不多。因此放假回家过年时，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。然而搞不清亲戚关系和亲戚称谓的不仅是小孩，就连年轻一代的大人也都常常模糊混乱。</p>
|
|
<p>“中国家庭称谓计算器”为你避免了这种尴尬，只需简单的输入即可算出称谓。输入框兼容了不同的叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等，方面不同地域的习惯叫法。快捷输入按键，只需简单的点击即可完成关系输入。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="script/common.js"></script>
|
|
<script src="script/relationship.js"></script>
|
|
<script>
|
|
var $textarea = document.getElementsByTagName('TEXTAREA');
|
|
var $btns = DOMUtil.getElementsByClassName('btn');
|
|
var $buttons = DOMUtil.getElementsByClassName('input-button');
|
|
|
|
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;
|
|
}
|
|
console.log(name);
|
|
if('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1){
|
|
$btns[2].disabled=true;
|
|
$btns[3].disabled=false;
|
|
}else{
|
|
$btns[2].disabled=false;
|
|
$btns[3].disabled=true;
|
|
}
|
|
}
|
|
}
|
|
|
|
$buttons[0].onclick = function(){
|
|
var value = $textarea[0].value.trim();
|
|
var result = relationship(value);
|
|
$textarea[1].value = '';
|
|
if(result.length){
|
|
for(var i=0;i<result.length;i++){
|
|
$textarea[1].value += result[i]+'\n';
|
|
}
|
|
}else{
|
|
$textarea[1].value = '貌似他/她跟你不是很熟哦!';
|
|
}
|
|
}
|
|
|
|
$buttons[1].onclick = function(){
|
|
var value = $textarea[0].value.trim();
|
|
var index = value.lastIndexOf('的');
|
|
index = Math.max(0,index);
|
|
$textarea[0].value = value.substr(0,index);
|
|
$textarea[1].value = '';
|
|
$btns[2].disabled=false;
|
|
$btns[3].disabled=false;
|
|
}
|
|
|
|
$buttons[2].onclick = function(){
|
|
$textarea[1].value = $textarea[0].value = '';
|
|
$btns[2].disabled=false;
|
|
$btns[3].disabled=false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |