docker/relationship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 改版DEMO，添加逆向查询等功能演示

Browse Source
This commit is contained in:
mumuy 2016-07-27 11:35:28 +08:00
parent d3a7f68e34
commit e0587976ce
2 changed files with 90 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
index.html
View File

@ -14,9 +14,17 @@
<div class="mod-panel"> <div class="mod-panel">
<div class="hd"><h1>中国家庭称谓计算器</h1></div> <div class="hd"><h1>中国家庭称谓计算器</h1></div>
<div class="bd"> <div class="bd">
<p>关系：</p> <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="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>家庭关系：</p>
<p> <p>
<textarea id="input" placeholder="注意:人物间用'的'字分开…"></textarea> <textarea id="input" placeholder="人物间用'的'字分开…"></textarea>
</p> </p>
<p> <p>
<span> <span>
@ -41,9 +49,9 @@
</span> </span>
</p> </p>
<p> <p>
<button class="input-button">计算</button>
<button class="input-button">回退</button> <button class="input-button">回退</button>
<button class="input-button">清空</button> <button class="input-button">清空</button>
<button class="input-button">计算</button>
</p> </p>
<p>计算结果：</p> <p>计算结果：</p>
<p> <p>
@ -51,17 +59,10 @@
</p> </p>
</div> </div>
<div class="ft"> <div class="ft">
<div class="about"> <div class="copy">
<p>由于工作生活节奏不同，如今很多关系稍疏远的亲戚之间来往并不多。因此放假回家过年时，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。然而搞不清亲戚关系和亲戚称谓的不仅是小孩，就连年轻一代的大人也都常常模糊混乱。</p> <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>
<p>“中国家庭称谓计算器”为你避免了这种尴尬，只需简单的输入即可算出称谓。输入框兼容了不同的叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等，方面不同地域的习惯叫法。快捷输入按键，只需简单的点击即可完成关系输入。</p> <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>
<br> <p>android版下载：<a href="http://passer-by.com/relationship/app.html" target="_blank">三姑六婆计算器</a></p>
<p>另有APP版本，支持反向查询：<a href="http://passer-by.com/relationship/app.html" target="_blank">三姑六婆计算器</a></p>
<br>
<p>本计算器为开源软件，引用还请注明来源“passer-by.com制作”,直接引用脚本可以获取最新更新！</p>
</div>
<div class="buttons">
<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>
</div> </div>
</div> </div>
</div> </div>
@ -71,20 +72,14 @@
<script src="script/common.js"></script> <script src="script/common.js"></script>
<script src="script/relationship.js"></script> <script src="script/relationship.js"></script>
<script> <script>
var $textarea = document.getElementsByTagName('TEXTAREA'); (function(){
var $btns = DOMUtil.getElementsByClassName('btn'); var $sex = document.getElementsByName('sex');
var $buttons = DOMUtil.getElementsByClassName('input-button'); var $reverse = document.getElementsByName('reverse');
var $textarea = document.getElementsByTagName('TEXTAREA');
for(var i=0;i<$btns.length;i++){ var $btns = DOMUtil.getElementsByClassName('btn');
$btns[i].onclick = function(){ var $buttons = DOMUtil.getElementsByClassName('input-button');
var value = $textarea[0].value.trim(); var toggle = function(sex){
var name = this.getAttribute('data-value'); if(sex){ //男女判断
if(value){
$textarea[0].value= value+'的'+name;
}else{
$textarea[0].value= name;
}
if('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1){
$btns[2].disabled=true; $btns[2].disabled=true;
$btns[3].disabled=false; $btns[3].disabled=false;
}else{ }else{
@ -92,44 +87,72 @@
$btns[3].disabled=true; $btns[3].disabled=true;
} }
} }
} var count = function(){
var value = $textarea[0].value.trim();
$buttons[0].onclick = function(){ if(value){
var value = $textarea[0].value.trim(); var sex = $sex[0].checked?1:0;
var result = relationship({text:value}); var reverse = !$reverse[0].checked;
$textarea[1].value = ''; var result = relationship({text:value,sex:sex,reverse:reverse});
if(result.length){ $textarea[1].value = '';
$textarea[1].value = result.join('\n'); if(result.length){
}else{ $textarea[1].value = result.join('\n');
$textarea[1].value = '貌似他/她跟你不是很熟哦!'; }else{
$textarea[1].value = '貌似他/她跟你不是很熟哦!';
}
}else{
$textarea[1].value = '';
}
} }
}
$buttons[1].onclick = function(){ for(var i=0;i<$btns.length;i++){
var value = $textarea[0].value.trim(); $btns[i].onclick = function(){
var index = value.lastIndexOf('的'); var value = $textarea[0].value.trim();
index = Math.max(0,index); var name = this.getAttribute('data-value');
var search = value.substr(0,index); if(value){
$textarea[0].value = search; $textarea[0].value= value+'的'+name;
$textarea[1].value = ''; }else{
var name = search.split('的').pop(); $textarea[0].value= name;
if(!name){ }
$btns[2].disabled=false; toggle('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
$btns[3].disabled=false; }
}else if('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1){
$btns[2].disabled=true;
$btns[3].disabled=false;
}else{
$btns[2].disabled=false;
$btns[3].disabled=true;
} }
} for(var i=0;i<$sex.length;i++){
$sex[i].onchange=function(){
toggle($sex[0].checked);
if($textarea[1].value){
count();
}
}
}
for(var i=0;i<$reverse.length;i++){
$reverse[i].onchange = function(){
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;
$buttons[2].onclick = function(){ toggle($sex[0].checked);
$textarea[1].value = $textarea[0].value = ''; })();
$btns[2].disabled=false;
$btns[3].disabled=false;
}
</script> </script>
<script async defer src="https://buttons.github.io/buttons.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script>
</body> </body>

7
style/index.css
View File

@ -68,7 +68,7 @@ a:hover{
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
.mod-panel p span{ .mod-panel label,.mod-panel p span{
margin-right:10px; margin-right:10px;
} }
.mod-panel .btn{ .mod-panel .btn{
@ -97,8 +97,11 @@ a:hover{
line-height: 24px; line-height: 24px;
text-indent: 2em; text-indent: 2em;
} }
.mod-panel .buttons{ .mod-panel .copy{
padding: 0 20px; padding: 0 20px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
}
.mod-panel .copy p{
line-height: 24px;
} }