updated 添加项目

2016-03-16 15:01:44 +08:00
commit a208b2a940
4 changed files with 738 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,107 @@
+<!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;
+					}
+				}
+			}
+
+			$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);
+			}
+
+			$buttons[2].onclick = function(){
+				$textarea[0].value = '';
+			}
+		</script>
+	</body>
+</html>