|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>姓名评分</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Microsoft YaHei', sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 30px; |
|
|
align-items: start; |
|
|
} |
|
|
|
|
|
.analyzer-panel, .history-panel { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
|
|
padding: 30px; |
|
|
} |
|
|
|
|
|
.title { |
|
|
font-size: 2.2em; |
|
|
color: #333; |
|
|
margin-bottom: 10px; |
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
font-weight: bold; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
color: #666; |
|
|
margin-bottom: 30px; |
|
|
font-size: 1em; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.input-section { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
position: relative; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
input[type="text"] { |
|
|
width: 100%; |
|
|
padding: 15px 20px; |
|
|
font-size: 1.1em; |
|
|
border: 2px solid #e0e0e0; |
|
|
border-radius: 15px; |
|
|
outline: none; |
|
|
transition: all 0.3s ease; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
input[type="text"]:focus { |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 15px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
.analyze-btn { |
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 15px 40px; |
|
|
font-size: 1.2em; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.analyze-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
.result-section { |
|
|
margin-top: 30px; |
|
|
padding: 25px; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
border-radius: 15px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.score-display { |
|
|
font-size: 2.5em; |
|
|
font-weight: bold; |
|
|
color: #333; |
|
|
margin-bottom: 15px; |
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.fortune-type { |
|
|
font-size: 1.2em; |
|
|
color: #667eea; |
|
|
margin-bottom: 20px; |
|
|
font-weight: bold; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.analysis-details { |
|
|
text-align: left; |
|
|
background: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
margin-top: 15px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.detail-item { |
|
|
margin-bottom: 10px; |
|
|
padding: 8px 0; |
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
} |
|
|
|
|
|
.detail-label { |
|
|
font-weight: bold; |
|
|
color: #333; |
|
|
display: inline-block; |
|
|
width: 60px; |
|
|
} |
|
|
|
|
|
.detail-value { |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.fortune-desc { |
|
|
margin-top: 15px; |
|
|
padding: 15px; |
|
|
background: linear-gradient(45deg, #ffeaa7, #fab1a0); |
|
|
border-radius: 10px; |
|
|
color: #2d3436; |
|
|
font-style: italic; |
|
|
} |
|
|
|
|
|
|
|
|
.history-title { |
|
|
font-size: 1.8em; |
|
|
color: #333; |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.history-table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.history-table th, |
|
|
.history-table td { |
|
|
padding: 12px 15px; |
|
|
text-align: left; |
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
} |
|
|
|
|
|
.history-table th { |
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.history-table tr:hover { |
|
|
background: #f8f9ff; |
|
|
} |
|
|
|
|
|
.score-cell { |
|
|
font-weight: bold; |
|
|
font-size: 1.2em; |
|
|
color: #667eea; |
|
|
} |
|
|
|
|
|
.fortune-cell { |
|
|
font-size: 0.9em; |
|
|
padding: 4px 8px; |
|
|
border-radius: 15px; |
|
|
color: white; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.fortune-great { background: linear-gradient(45deg, #ff6b6b, #ee5a52); } |
|
|
.fortune-good { background: linear-gradient(45deg, #4ecdc4, #44a08d); } |
|
|
.fortune-normal { background: linear-gradient(45deg, #45b7d1, #96c93d); } |
|
|
.fortune-average { background: linear-gradient(45deg, #f9ca24, #f0932b); } |
|
|
.fortune-poor { background: linear-gradient(45deg, #eb4d4b, #6c5ce7); } |
|
|
|
|
|
.pagination { |
|
|
margin-top: 20px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.pagination button { |
|
|
padding: 8px 15px; |
|
|
border: 1px solid #ddd; |
|
|
background: white; |
|
|
color: #666; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.pagination button:hover { |
|
|
background: #667eea; |
|
|
color: white; |
|
|
border-color: #667eea; |
|
|
} |
|
|
|
|
|
.pagination button.active { |
|
|
background: #667eea; |
|
|
color: white; |
|
|
border-color: #667eea; |
|
|
} |
|
|
|
|
|
.pagination button:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.pagination button:disabled:hover { |
|
|
background: white; |
|
|
color: #666; |
|
|
border-color: #ddd; |
|
|
} |
|
|
|
|
|
.page-info { |
|
|
color: #666; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.result-section.show { |
|
|
display: block; |
|
|
animation: fadeInUp 0.6s ease; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.title { |
|
|
font-size: 1.8em; |
|
|
} |
|
|
|
|
|
.history-table { |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.history-table th, |
|
|
.history-table td { |
|
|
padding: 8px 10px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
|
|
|
<div class="analyzer-panel"> |
|
|
<h1 class="title">姓名评分</h1> |
|
|
<p class="subtitle">基于传统命理学的姓名分析</p> |
|
|
|
|
|
<div class="input-section"> |
|
|
<div class="input-group"> |
|
|
<input type="text" id="nameInput" placeholder="请输入您的姓名" maxlength="10"> |
|
|
</div> |
|
|
<button class="analyze-btn" onclick="analyzeName()">开始分析</button> |
|
|
</div> |
|
|
|
|
|
<div class="result-section" id="resultSection"> |
|
|
<div class="score-display" id="scoreDisplay">85</div> |
|
|
<div class="fortune-type" id="fortuneType">富贵命</div> |
|
|
|
|
|
<div class="analysis-details"> |
|
|
<div class="detail-item"> |
|
|
<span class="detail-label">天格：</span> |
|
|
<span class="detail-value" id="tianGe">12</span> |
|
|
</div> |
|
|
<div class="detail-item"> |
|
|
<span class="detail-label">人格：</span> |
|
|
<span class="detail-value" id="renGe">23</span> |
|
|
</div> |
|
|
<div class="detail-item"> |
|
|
<span class="detail-label">地格：</span> |
|
|
<span class="detail-value" id="diGe">18</span> |
|
|
</div> |
|
|
<div class="detail-item"> |
|
|
<span class="detail-label">总格：</span> |
|
|
<span class="detail-value" id="zongGe">30</span> |
|
|
</div> |
|
|
<div class="detail-item"> |
|
|
<span class="detail-label">外格：</span> |
|
|
<span class="detail-value" id="waiGe">7</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fortune-desc" id="fortuneDesc"> |
|
|
此名五行搭配和谐，天人地三才相生，预示着事业有成，财运亨通。 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="history-panel"> |
|
|
<h2 class="history-title">姓名评分记录</h2> |
|
|
|
|
|
<table class="history-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>姓名</th> |
|
|
<th>分数</th> |
|
|
<th>命格</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="historyTableBody"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
|
|
|
<div class="pagination" id="pagination"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let nameHistory = []; |
|
|
|
|
|
const strokeMap = { |
|
|
|
|
|
'一': 1, '二': 2, '三': 3, '四': 4, '五': 5, '六': 6, '七': 7, '八': 8, '九': 9, '十': 2, |
|
|
'零': 13, '百': 6, '千': 3, '万': 15, '亿': 3, |
|
|
|
|
|
|
|
|
'王': 4, '李': 7, '张': 11, '刘': 15, '陈': 16, '杨': 13, '赵': 14, '黄': 12, '周': 8, |
|
|
'吴': 7, '徐': 10, '孙': 10, '胡': 9, '朱': 6, '高': 10, '林': 8, '何': 7, '郭': 15, |
|
|
'马': 10, '罗': 19, '梁': 11, '宋': 7, '郑': 19, '谢': 17, '韩': 17, '唐': 10, '冯': 12, |
|
|
'于': 3, '董': 15, '萧': 18, '程': 12, '曹': 11, '袁': 10, '邓': 19, '许': 11, '傅': 12, |
|
|
'沈': 7, '曾': 12, '彭': 12, '吕': 6, '苏': 22, '卢': 16, '蒋': 17, '蔡': 17, '贾': 13, |
|
|
'丁': 2, '魏': 18, '薛': 19, '叶': 15, '阎': 16, '余': 7, '潘': 16, '杜': 7, '戴': 18, |
|
|
'夏': 10, '钟': 17, '汪': 8, '田': 5, '任': 6, '姜': 9, '范': 15, '方': 4, '石': 5, |
|
|
'秦': 10, '江': 7, '顾': 21, '史': 5, '侯': 9, '邵': 12, '孟': 8, '龙': 16, |
|
|
'段': 9, '雷': 13, '钱': 16, '汤': 13, '尹': 4, '黎': 15, '易': 8, '常': 11, '武': 8, |
|
|
'乔': 12, '贺': 12, '赖': 16, '龚': 22, '文': 4, '庞': 19, '樊': 15, '兰': 23, '殷': 10, |
|
|
'温': 13, '包': 5, '左': 5, '右': 5, '司': 5, '上': 3, '欧': 15, |
|
|
'牛': 4, '车': 7, '白': 5, '葛': 15, '严': 20, '苗': 11, '鲁': 15, '韦': 9, '昌': 8, |
|
|
'卞': 4, '邹': 17, '单': 12, '云': 12, '窦': 20, '章': 11, '鲍': 17, |
|
|
'费': 12, '倪': 10, '甘': 5, '季': 8, '贝': 7, '管': 14, '鞠': 17, '房': 8, '裘': 13, |
|
|
|
|
|
|
|
|
'明': 8, '华': 14, '军': 9, '建': 9, '国': 11, '强': 12, '伟': 11, '新': 13, |
|
|
'志': 7, '勇': 9, '毅': 15, '俊': 9, '峰': 10, '刚': 10, '海': 11, '亮': 9, |
|
|
'敏': 11, '梅': 11, '凤': 14, '洁': 16, '芳': 10, '燕': 16, '红': 9, '丽': 19, |
|
|
'美': 9, '娜': 10, '静': 16, '欣': 8, '飞': 9, '雪': 11, '桂': 10, '英': 11, '莲': 17, |
|
|
'虎': 8, '鹏': 19, '鸿': 17, '宇': 6, '辰': 7, '星': 9, '月': 4, |
|
|
'阳': 17, '光': 6, '辉': 15, '磊': 15, '鑫': 24, '淼': 12, '森': 12, '焱': 12, '垚': 9, |
|
|
'琳': 13, '瑶': 15, '珊': 10, '莎': 13, '娟': 10, '秀': 7, '娇': 15, '艳': 24, '芬': 10, |
|
|
'婷': 12, '颖': 16, '慧': 15, '巧': 5, '淑': 12, '惠': 12, |
|
|
'珠': 11, '翠': 14, '雅': 12, '芝': 10, '玉': 5, '萍': 14, '娥': 10, '玲': 10, |
|
|
'彩': 11, '春': 9, '菊': 14, |
|
|
|
|
|
|
|
|
'诚': 14, '信': 9, '义': 13, '礼': 18, '智': 12, '仁': 4, '勤': 13, '俭': 15, '廉': 13, |
|
|
'孝': 7, '悌': 11, '忠': 8, '恕': 10, '恒': 10, '谦': 17, '和': 8, '善': 12, '慈': 14, |
|
|
'爱': 13, '德': 15, '行': 6, '修': 10, '养': 15, '品': 9, '格': 10, '操': 16, '节': 13, |
|
|
|
|
|
|
|
|
'成': 7, '功': 5, '业': 13, '就': 12, '达': 16, '兴': 16, '旺': 8, '盛': 12, |
|
|
'荣': 14, '贵': 12, '权': 22, '势': 13, '威': 9, '名': 6, '声': 17, |
|
|
'誉': 21, '望': 11, '才': 4, '能': 10, '干': 3, '展': 10, '创': 12, '进': 15, |
|
|
'取': 8, '拼': 10, '搏': 14, '奋': 16, '斗': 4, '争': 8, '胜': 12, '赢': 20, '超': 12, |
|
|
|
|
|
|
|
|
'天': 4, '地': 6, '山': 3, '水': 4, '火': 4, '木': 4, '金': 8, '土': 3, |
|
|
'风': 9, '雨': 8, '电': 13, '霜': 17, '冰': 6, '雾': 19, |
|
|
'日': 4, '照': 13, |
|
|
'河': 9, '湖': 13, '泉': 9, '溪': 14, '流': 10, '波': 9, '涛': 18, |
|
|
'树': 16, '花': 8, '草': 12, '根': 10, '枝': 8, '果': 8, |
|
|
|
|
|
|
|
|
'橙': 16, '绿': 14, '青': 8, '蓝': 20, '紫': 12, '黑': 12, |
|
|
'灰': 6, '银': 14, '色': 6, '暗': 13, '淡': 12, '浓': 16, |
|
|
|
|
|
|
|
|
'狮': 13, '豹': 10, '鹰': 24, '雁': 12, '鸽': 17, |
|
|
'鹤': 21, '鹿': 11, '羊': 6, '猪': 11, '狗': 8, '猫': 16, '兔': 8, |
|
|
'鱼': 11, '鸟': 11, '蝶': 15, '蜂': 13, '龟': 16, '蛇': 11, '鼠': 13, '猴': 12, '鸡': 18, |
|
|
|
|
|
|
|
|
'松': 8, '柏': 9, '竹': 6, '荷': 13, |
|
|
'桃': 10, '杏': 7, '枣': 8, '柿': 9, '橘': 16, '苹': 22, '梨': 11, '葡': 15, |
|
|
'萄': 15, '茎': 11, '实': 14, |
|
|
|
|
|
|
|
|
'秋': 9, '冬': 5, '年': 6, '时': 10, '分': 4, |
|
|
'秒': 9, '刻': 8, '瞬': 18, '永': 5, '久': 3, '短': 12, '慢': 14, |
|
|
'早': 6, '晚': 11, '今': 4, '昔': 8, '古': 5, '老': 6, '少': 4, '幼': 5, |
|
|
|
|
|
|
|
|
'南': 9, '西': 6, '北': 5, '中': 4, '下': 3, |
|
|
'前': 9, '内': 4, '外': 5, '里': 7, '表': 8, '远': 17, '近': 11, '高': 10, |
|
|
'低': 7, '深': 12, '浅': 12, '宽': 15, '窄': 10, '大': 3, '小': 3, |
|
|
|
|
|
|
|
|
'恨': 9, '怒': 9, '哀': 9, '乐': 15, '悲': 12, '欢': 22, '愁': 13, |
|
|
'忧': 7, '思': 9, '念': 8, '想': 13, '盼': 9, '愿': 14, '希': 7, '求': 7, |
|
|
'得': 11, '失': 5, '来': 8, '去': 5, '归': 18, '离': 18, '聚': 14, '散': 12, '合': 6, |
|
|
|
|
|
|
|
|
'习': 11, '读': 14, '写': 15, '画': 12, '唱': 11, '跳': 13, '演': 14, |
|
|
'讲': 17, '说': 14, '话': 13, '语': 14, '言': 7, '词': 12, '句': 5, |
|
|
'字': 6, '笔': 10, '纸': 10, '墨': 15, '砚': 9, '琴': 13, '棋': 12, '诗': 13, |
|
|
|
|
|
|
|
|
'头': 16, '脸': 17, '眼': 11, '耳': 6, '鼻': 14, '嘴': 16, '牙': 4, '舌': 6, '手': 4, |
|
|
'脚': 13, '心': 4, '肝': 7, '肺': 9, '肾': 8, '脑': 10, '血': 6, '肉': 6, '骨': 10, |
|
|
'皮': 5, '毛': 4, '发': 12, '须': 12, '眉': 9, '睫': 13, '指': 9, '掌': 12, |
|
|
|
|
|
|
|
|
'卫': 15, '广': 15, '印': 6, '耀': 20, '正': 5, '午': 7, '宝': 20, '宏': 7, |
|
|
'羽': 6, '凡': 3, '长': 8, '彦': 9, '传': 13, '庆': 15, '后': 9, '健': 11, |
|
|
'甫': 7, '伯': 7, '仲': 6, '叔': 8, '季': 8, '纯': 10, '良': 7, '嘉': 14, '哲': 10, |
|
|
'瑞': 14, '祥': 11, '吉': 6, '泰': 10, '安': 6, '平': 5, '顺': 12, '通': 14, |
|
|
'康': 11, '宁': 14, '寿': 14, '福': 14, '禄': 13, '禧': 17, '祺': 13, '祯': 14, |
|
|
|
|
|
|
|
|
'个': 10, '只': 5, '匹': 4, '条': 11, '支': 4, '把': 7, '件': 6, |
|
|
'套': 10, '双': 4, '对': 14, '副': 11, '群': 13, '批': 7, '些': 8, '点': 9, '滴': 14, |
|
|
|
|
|
|
|
|
'是': 9, '有': 6, '在': 6, '了': 2, '着': 11, '过': 12, '出': 5, |
|
|
'到': 8, '开': 12, '关': 19, '放': 8, '拿': 10, '给': 12, '让': 24, |
|
|
'叫': 5, '听': 22, '看': 9, '知': 8, '道': 16, '会': 13, '要': 9, |
|
|
'用': 5, '作': 7, '做': 11, '为': 9, '被': 11, '从': 11, '向': 6, |
|
|
'跟': 13, '与': 14, '于': 3, '按': 10, '依': 8, |
|
|
'兮': 4, '之': 4, '乎': 5, '者': 10, '也': 3, '矣': 7, '哉': 9, '焉': 11, '然': 12, |
|
|
'子': 3, '涵': 12, '轩': 10, '梓': 11, '睿': 14, '浩': 11, '诺': 16, '伊': 6, |
|
|
'琪': 13, '辰': 7, '皓': 12, '沐': 8, '宸': 10, '萱': 15, '泽': 17, '怡': 9, '彤': 7 |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const defaultHistoryData = [ |
|
|
{ name: '贾卫星', score: 77, type: '小康之家' }, { name: '罗广华', score: 70, type: '平凡人生' }, |
|
|
{ name: '刘印', score: 77, type: '小康之家' }, { name: '宋强', score: 76, type: '小康之家' }, |
|
|
{ name: '聂耀军', score: 77, type: '小康之家' }, { name: '张正午', score: 91, type: '富贵命' }, |
|
|
{ name: '孙宝华', score: 89, type: '富贵命' }, { name: '毛宏羽', score: 99, type: '大富大贵' }, |
|
|
{ name: '白超凡', score: 95, type: '大富大贵' }, { name: '李长安', score: 91, type: '富贵命' }, |
|
|
{ name: '王明华', score: 85, type: '富贵命' }, { name: '陈建国', score: 82, type: '富贵命' }, |
|
|
{ name: '张伟强', score: 78, type: '小康之家' }, { name: '刘德华', score: 88, type: '富贵命' }, |
|
|
{ name: '杨过', score: 92, type: '富贵命' }, { name: '赵云', score: 96, type: '大富大贵' }, |
|
|
{ name: '马云', score: 87, type: '富贵命' }, { name: '马化腾', score: 93, type: '大富大贵' }, |
|
|
{ name: '李彦宏', score: 89, type: '富贵命' }, { name: '任正非', score: 94, type: '大富大贵' }, |
|
|
{ name: '董明珠', score: 86, type: '富贵命' }, |
|
|
{ name: '柳传志', score: 90, type: '富贵命' }, |
|
|
{ name: '宗庆后', score: 88, type: '富贵命' }, { name: '王健林', score: 92, type: '富贵命' }, |
|
|
{ name: '许家印', score: 84, type: '富贵命' } |
|
|
]; |
|
|
|
|
|
function initializeHistoryData() { |
|
|
const storedData = localStorage.getItem('nameHistoryData'); |
|
|
if (storedData) { |
|
|
try { |
|
|
nameHistory = JSON.parse(storedData); |
|
|
if (!Array.isArray(nameHistory) || nameHistory.length === 0) { |
|
|
nameHistory = [...defaultHistoryData]; |
|
|
saveHistoryData(); |
|
|
} |
|
|
} catch (e) { |
|
|
console.error("Error parsing name history from localStorage:", e); |
|
|
nameHistory = [...defaultHistoryData]; |
|
|
saveHistoryData(); |
|
|
} |
|
|
} else { |
|
|
nameHistory = [...defaultHistoryData]; |
|
|
saveHistoryData(); |
|
|
} |
|
|
} |
|
|
|
|
|
function saveHistoryData() { |
|
|
try { |
|
|
localStorage.setItem('nameHistoryData', JSON.stringify(nameHistory)); |
|
|
} catch (e) { |
|
|
console.error("Error saving name history to localStorage:", e); |
|
|
} |
|
|
} |
|
|
|
|
|
let currentPage = 1; |
|
|
const itemsPerPage = 8; |
|
|
|
|
|
const wuxingMap = { |
|
|
1: '木', 2: '木', 3: '火', 4: '火', 5: '土', 6: '土', 7: '金', 8: '金', 9: '水', 0: '水' |
|
|
}; |
|
|
|
|
|
const fortuneTypes = [ |
|
|
{ range: [90, 100], type: '大富大贵', desc: '天赋异禀，命中注定大富大贵，一生荣华富贵。', class: 'fortune-great' }, |
|
|
{ range: [80, 89], type: '富贵命', desc: '财运亨通，事业有成，生活富足安康。', class: 'fortune-good' }, |
|
|
{ range: [70, 79], type: '小康之家', desc: '生活安稳，衣食无忧，家庭和睦。', class: 'fortune-normal' }, |
|
|
{ range: [60, 69], type: '平凡人生', desc: '平平淡淡才是真，虽无大富大贵，但生活平安。', class: 'fortune-average' }, |
|
|
{ range: [50, 59], type: '需要努力', desc: '通过自身努力可以改善命运，坚持不懈必有收获。', class: 'fortune-poor' }, |
|
|
{ range: [0, 49], type: '多加修行', desc: '需要多做善事，修身养性，方能转运。', class: 'fortune-poor' } |
|
|
]; |
|
|
|
|
|
function getStrokeCount(char) { |
|
|
if (strokeMap[char] !== undefined) { |
|
|
return strokeMap[char]; |
|
|
} |
|
|
console.warn(`Stroke count not found for character: "${char}". Using fallback.`); |
|
|
const charCode = char.charCodeAt(0); |
|
|
return ((charCode % 15) + 5); |
|
|
} |
|
|
|
|
|
function getWuxing(num) { |
|
|
return wuxingMap[num % 10]; |
|
|
} |
|
|
|
|
|
|
|
|
function calculateScore(tianGe, renGe, diGe, zongGe, waiGe) { |
|
|
let score = 50; |
|
|
|
|
|
if (tianGe % 10 === 1 || tianGe % 10 === 3 || tianGe % 10 === 5 || tianGe % 10 === 8) { |
|
|
score += 10; |
|
|
} |
|
|
|
|
|
if (renGe % 10 === 1 || renGe % 10 === 3 || renGe % 10 === 5 || renGe % 10 === 8) { |
|
|
score += 15; |
|
|
} |
|
|
if (renGe >= 13 && renGe <= 16) score += 5; |
|
|
if (renGe >= 21 && renGe <= 23) score += 8; |
|
|
|
|
|
if (diGe % 10 === 1 || diGe % 10 === 3 || diGe % 10 === 5 || diGe % 10 === 8) { |
|
|
score += 10; |
|
|
} |
|
|
|
|
|
if (zongGe % 10 === 1 || zongGe % 10 === 3 || zongGe % 10 === 5 || zongGe % 10 === 8) { |
|
|
score += 10; |
|
|
} |
|
|
|
|
|
if (waiGe % 10 === 1 || waiGe % 10 === 3 || waiGe % 10 === 5 || waiGe % 10 === 8) { |
|
|
score += 5; |
|
|
} |
|
|
|
|
|
const tianWuxing = getWuxing(tianGe); |
|
|
const renWuxing = getWuxing(renGe); |
|
|
const diWuxing = getWuxing(diGe); |
|
|
|
|
|
|
|
|
if ((tianWuxing === '木' && renWuxing === '火') || |
|
|
(tianWuxing === '火' && renWuxing === '土') || |
|
|
(tianWuxing === '土' && renWuxing === '金') || |
|
|
(tianWuxing === '金' && renWuxing === '水') || |
|
|
(tianWuxing === '水' && renWuxing === '木')) { |
|
|
score += 5; |
|
|
} |
|
|
|
|
|
|
|
|
if ((renWuxing === '木' && diWuxing === '火') || |
|
|
(renWuxing === '火' && diWuxing === '土') || |
|
|
(renWuxing === '土' && diWuxing === '金') || |
|
|
(renWuxing === '金' && diWuxing === '水') || |
|
|
(renWuxing === '水' && diWuxing === '木')) { |
|
|
score += 5; |
|
|
} |
|
|
|
|
|
return Math.min(99, Math.max(45, Math.floor(score))); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getFortuneType(score) { |
|
|
for (let fortune of fortuneTypes) { |
|
|
if (score >= fortune.range[0] && score <= fortune.range[1]) { |
|
|
return fortune; |
|
|
} |
|
|
} |
|
|
return fortuneTypes[fortuneTypes.length - 1]; |
|
|
} |
|
|
|
|
|
function getFortuneClass(type) { |
|
|
const fortune = fortuneTypes.find(f => f.type === type); |
|
|
return fortune ? fortune.class : 'fortune-poor'; |
|
|
} |
|
|
|
|
|
function analyzeName() { |
|
|
const name = document.getElementById('nameInput').value.trim(); |
|
|
|
|
|
if (!name) { |
|
|
alert('请输入姓名'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const chineseCharRegex = /^[\u4e00-\u9fa5]+$/; |
|
|
if (!chineseCharRegex.test(name)) { |
|
|
alert('姓名中只能包含汉字'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (name.length < 2 || name.length > 4) { |
|
|
alert('请输入2-4个字的姓名'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const strokes = []; |
|
|
for (let char of name) { |
|
|
strokes.push(getStrokeCount(char)); |
|
|
} |
|
|
|
|
|
let tianGe, renGe, diGe, zongGe, waiGe; |
|
|
|
|
|
if (name.length === 2) { |
|
|
tianGe = strokes[0] + 1; |
|
|
renGe = strokes[0] + strokes[1]; |
|
|
diGe = strokes[1] + 1; |
|
|
zongGe = strokes[0] + strokes[1]; |
|
|
waiGe = 2; |
|
|
} else if (name.length === 3) { |
|
|
tianGe = strokes[0] + 1; |
|
|
renGe = strokes[0] + strokes[1]; |
|
|
diGe = strokes[1] + strokes[2]; |
|
|
zongGe = strokes[0] + strokes[1] + strokes[2]; |
|
|
waiGe = strokes[2] + 1; |
|
|
} else { |
|
|
tianGe = strokes[0] + strokes[1]; |
|
|
renGe = strokes[1] + strokes[2]; |
|
|
diGe = strokes[2] + strokes[3]; |
|
|
zongGe = strokes[0] + strokes[1] + strokes[2] + strokes[3]; |
|
|
waiGe = strokes[0] + strokes[3]; |
|
|
} |
|
|
|
|
|
const score = calculateScore(tianGe, renGe, diGe, zongGe, waiGe); |
|
|
const fortune = getFortuneType(score); |
|
|
|
|
|
const existingIndex = nameHistory.findIndex(item => item.name === name); |
|
|
if (existingIndex !== -1) { |
|
|
const updatedItem = { name, score, type: fortune.type }; |
|
|
nameHistory.splice(existingIndex, 1); |
|
|
nameHistory.unshift(updatedItem); |
|
|
} else { |
|
|
nameHistory.unshift({ name, score, type: fortune.type }); |
|
|
} |
|
|
|
|
|
saveHistoryData(); |
|
|
|
|
|
document.getElementById('scoreDisplay').textContent = score; |
|
|
document.getElementById('fortuneType').textContent = fortune.type; |
|
|
document.getElementById('tianGe').textContent = `${tianGe}`; |
|
|
document.getElementById('renGe').textContent = `${renGe}`; |
|
|
document.getElementById('diGe').textContent = `${diGe}`; |
|
|
document.getElementById('zongGe').textContent = `${zongGe}`; |
|
|
document.getElementById('waiGe').textContent = `${waiGe}`; |
|
|
document.getElementById('fortuneDesc').textContent = fortune.desc; |
|
|
|
|
|
document.getElementById('resultSection').classList.add('show'); |
|
|
|
|
|
currentPage = 1; |
|
|
displayHistory(); |
|
|
} |
|
|
|
|
|
function displayHistory() { |
|
|
const tbody = document.getElementById('historyTableBody'); |
|
|
const startIndex = (currentPage - 1) * itemsPerPage; |
|
|
const endIndex = startIndex + itemsPerPage; |
|
|
const pageData = nameHistory.slice(startIndex, endIndex); |
|
|
|
|
|
tbody.innerHTML = ''; |
|
|
|
|
|
pageData.forEach(item => { |
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = ` |
|
|
<td>${item.name}</td> |
|
|
<td class="score-cell">${item.score}</td> |
|
|
<td><span class="fortune-cell ${getFortuneClass(item.type)}">${item.type}</span></td> |
|
|
`; |
|
|
tbody.appendChild(row); |
|
|
}); |
|
|
|
|
|
displayPagination(); |
|
|
} |
|
|
|
|
|
function displayPagination() { |
|
|
const totalPages = Math.ceil(nameHistory.length / itemsPerPage); |
|
|
const pagination = document.getElementById('pagination'); |
|
|
|
|
|
pagination.innerHTML = ''; |
|
|
|
|
|
if (totalPages <= 1) return; |
|
|
|
|
|
const prevBtn = document.createElement('button'); |
|
|
prevBtn.textContent = '上一页'; |
|
|
prevBtn.disabled = currentPage === 1; |
|
|
prevBtn.onclick = () => { |
|
|
if (currentPage > 1) { |
|
|
currentPage--; |
|
|
displayHistory(); |
|
|
} |
|
|
}; |
|
|
pagination.appendChild(prevBtn); |
|
|
|
|
|
let startPage = Math.max(1, currentPage - 2); |
|
|
let endPage = Math.min(totalPages, currentPage + 2); |
|
|
|
|
|
if (currentPage <= 3) { |
|
|
endPage = Math.min(totalPages, 5); |
|
|
} |
|
|
if (currentPage >= totalPages - 2) { |
|
|
startPage = Math.max(1, totalPages - 4); |
|
|
} |
|
|
|
|
|
for (let i = startPage; i <= endPage; i++) { |
|
|
const pageBtn = document.createElement('button'); |
|
|
pageBtn.textContent = i; |
|
|
pageBtn.className = i === currentPage ? 'active' : ''; |
|
|
pageBtn.onclick = () => { |
|
|
currentPage = i; |
|
|
displayHistory(); |
|
|
}; |
|
|
pagination.appendChild(pageBtn); |
|
|
} |
|
|
|
|
|
const nextBtn = document.createElement('button'); |
|
|
nextBtn.textContent = '下一页'; |
|
|
nextBtn.disabled = currentPage === totalPages; |
|
|
nextBtn.onclick = () => { |
|
|
if (currentPage < totalPages) { |
|
|
currentPage++; |
|
|
displayHistory(); |
|
|
} |
|
|
}; |
|
|
pagination.appendChild(nextBtn); |
|
|
|
|
|
const pageInfo = document.createElement('span'); |
|
|
pageInfo.className = 'page-info'; |
|
|
pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`; |
|
|
pagination.appendChild(pageInfo); |
|
|
} |
|
|
|
|
|
document.getElementById('nameInput').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
analyzeName(); |
|
|
} |
|
|
}); |
|
|
|
|
|
window.onload = function() { |
|
|
initializeHistoryData(); |
|
|
displayHistory(); |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
