<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入声字查询与学习系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', 'STKaiti', serif;
}
body {
background: linear-gradient(135deg, #2c3e50, #1a2a3a);
color: #f0f0f0;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
background: rgba(10, 20, 30, 0.85);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
padding: 30px;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.header {
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.header h1 {
font-size: 3rem;
text-shadow: 0 0 15px rgba(100, 200, 255, 0.7);
margin-bottom: 15px;
letter-spacing: 3px;
background: linear-gradient(to right, #4facfe, #00f2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.header p {
font-size: 1.3rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.tabs {
display: flex;
background: rgba(30, 50, 70, 0.7);
border-radius: 12px;
margin-bottom: 30px;
overflow: hidden;
}
.tab-btn {
flex: 1;
padding: 18px 0;
font-size: 1.3rem;
font-weight: bold;
background: transparent;
border: none;
color: #a0c8f0;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.tab-btn.active {
background: rgba(50, 100, 150, 0.6);
color: #fff;
border-bottom: 3px solid #4facfe;
}
.tab-btn:hover:not(.active) {
background: rgba(40, 80, 120, 0.4);
color: #fff;
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.search-section {
background: rgba(20, 40, 60, 0.7);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.search-box {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
.search-input {
flex: 1;
padding: 16px 20px;
font-size: 1.2rem;
border: 2px solid #4facfe;
border-radius: 50px;
background: rgba(10, 20, 30, 0.8);
color: #fff;
outline: none;
transition: all 0.3s ease;
}
.search-input:focus {
border-color: #00f2fe;
box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}
.search-btn {
padding: 0 40px;
font-size: 1.2rem;
background: linear-gradient(to right, #4facfe, #00f2fe);
border: none;
border-radius: 50px;
color: #fff;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.search-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
}
.examples {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}
.example-btn {
padding: 8px 20px;
background: rgba(50, 100, 150, 0.5);
border: 1px solid #4facfe;
border-radius: 30px;
color: #a0c8f0;
cursor: pointer;
transition: all 0.2s ease;
}
.example-btn:hover {
background: rgba(79, 172, 254, 0.3);
color: #fff;
}
.results-section {
background: rgba(20, 40, 60, 0.7);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.character-card {
background: rgba(30, 60, 90, 0.8);
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.character-card:hover {
transform: translateY(-5px);
border-color: #4facfe;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.character {
font-size: 5rem;
margin-bottom: 15px;
color: #4facfe;
text-shadow: 0 0 10px rgba(79, 172, 254, 0.6);
}
.character-info {
font-size: 1.2rem;
line-height: 1.8;
}
.character-info strong {
color: #00f2fe;
}
.learning-section {
background: rgba(20, 40, 60, 0.7);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.rules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 25px;
}
.rule-card {
background: rgba(30, 60, 90, 0.8);
border-radius: 15px;
padding: 25px;
border-left: 5px solid #4facfe;
}
.rule-card h3 {
color: #4facfe;
margin-bottom: 15px;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.rule-card ul {
padding-left: 25px;
}
.rule-card li {
margin-bottom: 10px;
line-height: 1.6;
}
.common-characters {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
.common-char {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
background: rgba(30, 60, 90, 0.8);
border-radius: 10px;
color: #00f2fe;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.common-char:hover {
background: rgba(79, 172, 254, 0.3);
transform: translateY(-5px);
border-color: #4facfe;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.quiz-section {
background: rgba(20, 40, 60, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.quiz-container {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.quiz-character {
font-size: 8rem;
color: #4facfe;
text-shadow: 0 0 15px rgba(79, 172, 254, 0.7);
margin: 30px 0;
}
.quiz-question {
font-size: 1.8rem;
margin-bottom: 30px;
}
.quiz-options {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
}
.quiz-option {
padding: 15px 40px;
font-size: 1.3rem;
border: 2px solid #4facfe;
border-radius: 50px;
background: rgba(30, 60, 90, 0.8);
color: #a0c8f0;
cursor: pointer;
transition: all 0.3s ease;
}
.quiz-option:hover {
background: rgba(79, 172, 254, 0.3);
color: #fff;
}
.quiz-result {
font-size: 1.5rem;
min-height: 60px;
margin-top: 20px;
padding: 20px;
border-radius: 15px;
}
.correct {
background: rgba(40, 180, 100, 0.2);
color: #4afca0;
border: 2px solid #4afca0;
}
.incorrect {
background: rgba(180, 40, 60, 0.2);
color: #ff6b6b;
border: 2px solid #ff6b6b;
}
.decoration {
position: absolute;
opacity: 0.05;
z-index: 1;
font-size: 15rem;
pointer-events: none;
}
.decoration-1 {
top: 50px;
right: 50px;
transform: rotate(15deg);
}
.decoration-2 {
bottom: 50px;
left: 50px;
transform: rotate(-10deg);
}
.decoration-3 {
top: 40%;
left: 10%;
transform: rotate(5deg);
}
.footer {
margin-top: 30px;
text-align: center;
color: #a0c8f0;
font-size: 1.1rem;
opacity: 0.8;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2.2rem;
}
.tabs {
flex-direction: column;
}
.quiz-options {
flex-direction: column;
gap: 15px;
}
.character {
font-size: 4rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="decoration decoration-1">入</div>
<div class="decoration decoration-2">声</div>
<div class="decoration decoration-3">字</div>
<div class="header">
<h1><i class="fas fa-language"></i> 入声字查询与学习系统</h1>
<p>探索古汉语中的入声字，了解其发音特点、历史演变及在现代汉语中的变化</p>
</div>
<div class="tabs">
<button class="tab-btn active" data-tab="search"><i class="fas fa-search"></i> 入声字查询</button>
<button class="tab-btn" data-tab="learn"><i class="fas fa-book"></i> 入声字学习</button>
<button class="tab-btn" data-tab="quiz"><i class="fas fa-gamepad"></i> 入声字测验</button>
</div>
<!-- 查询标签页 -->
<div class="tab-content active" id="search-tab">
<div class="search-section">
<h2><i class="fas fa-search"></i> 入声字查询</h2>
<p>输入汉字查询是否为入声字及其详细信息</p>
<div class="search-box">
<input type="text" class="search-input" id="searchInput" placeholder="输入汉字进行查询...">
<button class="search-btn" id="searchBtn">查询</button>
</div>
<p>常用入声字示例:
<div class="examples">
<button class="example-btn" data-char="白">白</button>
<button class="example-btn" data-char="黑">黑</button>
<button class="example-btn" data-char="日">日</button>
<button class="example-btn" data-char="月">月</button>
<button class="example-btn" data-char="国">国</button>
<button class="example-btn" data-char="学">学</button>
<button class="example-btn" data-char="一">一</button>
<button class="example-btn" data-char="七">七</button>
</div>
</p>
</div>
<div class="results-section">
<h2><i class="fas fa-list"></i> 查询结果</h2>
<div class="results-grid" id="resultsGrid">
<!-- 结果将通过JS动态生成 -->
</div>
</div>
</div>
<!-- 学习标签页 -->
<div class="tab-content" id="learn-tab">
<div class="learning-section">
<h2><i class="fas fa-book"></i> 入声字学习</h2>
<p>入声是古汉语四声（平、上、去、入）之一，发音特点是短促急收。在现代汉语普通话中，入声已经消失，但在一些方言中仍有保留。</p>
<div class="rules-grid">
<div class="rule-card">
<h3><i class="fas fa-volume-up"></i> 入声特点</h3>
<ul>
<li>发音短促，有塞音韵尾（-p, -t, -k）</li>
<li>在诗词中属于仄声，对诗词格律很重要</li>
<li>现代普通话中，入声字已归入其他四声</li>
<li>在粤语、闽南语等方言中保留较好</li>
</ul>
</div>
<div class="rule-card">
<h3><i class="fas fa-history"></i> 历史演变</h3>
<ul>
<li>中古汉语时期（隋唐）形成完整四声系统</li>
<li>宋代以后，北方方言中入声开始消失</li>
<li>元代《中原音韵》中入声已并入其他声调</li>
<li>现代南方方言仍保留入声系统</li>
</ul>
</div>
<div class="rule-card">
<h3><i class="fas fa-code"></i> 识别方法</h3>
<ul>
<li>普通话中读阳平（二声）的鼻韵母字多为入声字</li>
<li>声母为b、d、g、j、zh、z的阳平字多为入声字</li>
<li>韵母为uo的阳平字多为入声字</li>
<li>韵母为ie、üe的字多为入声字</li>
</ul>
</div>
</div>
<h3 style="margin-top: 40px; text-align: center; color: #4facfe;">
<i class="fas fa-star"></i> 常见入声字
</h3>
<div class="common-characters">
<div class="common-char" data-char="一">一</div>
<div class="common-char" data-char="七">七</div>
<div class="common-char" data-char="八">八</div>
<div class="common-char" data-char="十">十</div>
<div class="common-char" data-char="白">白</div>
<div class="common-char" data-char="黑">黑</div>
<div class="common-char" data-char="日">日</div>
<div class="common-char" data-char="月">月</div>
<div class="common-char" data-char="国">国</div>
<div class="common-char" data-char="学">学</div>
<div class="common-char" data-char="石">石</div>
<div class="common-char" data-char="竹">竹</div>
<div class="common-char" data-char="出">出</div>
<div class="common-char" data-char="入">入</div>
<div class="common-char" data-char="急">急</div>
</div>
</div>
</div>
<!-- 测验标签页 -->
<div class="tab-content" id="quiz-tab">
<div class="quiz-section">
<h2><i class="fas fa-gamepad"></i> 入声字测验</h2>
<p>测试你对入声字的了解，判断下列汉字是否为入声字</p>
<div class="quiz-container">
<div class="quiz-character" id="quizChar">学</div>
<div class="quiz-question">这个汉字是入声字吗？</div>
<div class="quiz-options">
<div class="quiz-option" id="optionYes">是</div>
<div class="quiz-option" id="optionNo">否</div>
</div>
<div class="quiz-result" id="quizResult">
请选择你的答案
</div>
<button class="search-btn" id="nextQuestion" style="margin-top: 20px;">
<i class="fas fa-arrow-right"></i> 下一题
</button>
</div>
</div>
</div>
<div class="footer">
<p>© 2023 入声字查询与学习系统 | 古汉语研究工具</p>
</div>
</div>
<script>
// 入声字数据库
const enteringToneChars = {
'一': {
pinyin: 'yī',
category: '质韵',
modern: '阴平',
description: '数字一，古为入声字，普通话中读阴平',
examples: '一心、唯一、一切',
isEntering: true
},
'七': {
pinyin: 'qī',
category: '质韵',
modern: '阴平',
description: '数字七，古为入声字，普通话中读阴平',
examples: '七月、七夕、七律',
isEntering: true
},
'八': {
pinyin: 'bā',
category: '黠韵',
modern: '阴平',
description: '数字八，古为入声字，普通话中读阴平',
examples: '八月、八方、八仙',
isEntering: true
},
'十': {
pinyin: 'shí',
category: '缉韵',
modern: '阳平',
description: '数字十，古为入声字，普通话中读阳平',
examples: '十分、十全、十方',
isEntering: true
},
'白': {
pinyin: 'bái',
category: '陌韵',
modern: '阳平',
description: '颜色白，古为入声字，普通话中读阳平',
examples: '白色、白云、明白',
isEntering: true
},
'黑': {
pinyin: 'hēi',
category: '职韵',
modern: '阴平',
description: '颜色黑，古为入声字，普通话中读阴平',
examples: '黑色、黑暗、黑白',
isEntering: true
},
'日': {
pinyin: 'rì',
category: '质韵',
modern: '去声',
description: '太阳，古为入声字，普通话中读去声',
examples: '日光、日期、日本',
isEntering: true
},
'月': {
pinyin: 'yuè',
category: '月韵',
modern: '去声',
description: '月亮，古为入声字，普通话中读去声',
examples: '月光、月亮、月球',
isEntering: true
},
'国': {
pinyin: 'guó',
category: '德韵',
modern: '阳平',
description: '国家，古为入声字，普通话中读阳平',
examples: '国家、国际、中国',
isEntering: true
},
'学': {
pinyin: 'xué',
category: '觉韵',
modern: '阳平',
description: '学习，古为入声字，普通话中读阳平',
examples: '学习、学生、学校',
isEntering: true
},
'石': {
pinyin: 'shí',
category: '昔韵',
modern: '阳平',
description: '石头，古为入声字，普通话中读阳平',
examples: '石头、石油、宝石',
isEntering: true
},
'竹': {
pinyin: 'zhú',
category: '屋韵',
modern: '阳平',
description: '竹子，古为入声字，普通话中读阳平',
examples: '竹子、竹林、竹简',
isEntering: true
},
'出': {
pinyin: 'chū',
category: '术韵',
modern: '阴平',
description: '出去，古为入声字，普通话中读阴平',
examples: '出现、出发、出入',
isEntering: true
},
'入': {
pinyin: 'rù',
category: '缉韵',
modern: '去声',
description: '进入，古为入声字，普通话中读去声',
examples: '进入、入口、出入',
isEntering: true
},
'急': {
pinyin: 'jí',
category: '缉韵',
modern: '阳平',
description: '着急，古为入声字，普通话中读阳平',
examples: '急忙、急促、着急',
isEntering: true
},
'天': {
pinyin: 'tiān',
category: '先韵',
modern: '阴平',
description: '天空，古为平声字，普通话中读阴平',
examples: '天空、天气、春天',
isEntering: false
},
'山': {
pinyin: 'shān',
category: '山韵',
modern: '阴平',
description: '山峰，古为平声字，普通话中读阴平',
examples: '山峰、山水、江山',
isEntering: false
},
'水': {
pinyin: 'shuǐ',
category: '旨韵',
modern: '上声',
description: '水流，古为上声字，普通话中读上声',
examples: '水流、水面、山水',
isEntering: false
},
'风': {
pinyin: 'fēng',
category: '东韵',
modern: '阴平',
description: '刮风，古为平声字，普通话中读阴平',
examples: '风景、风格、春风',
isEntering: false
}
};
// DOM元素
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
const resultsGrid = document.getElementById('resultsGrid');
const exampleBtns = document.querySelectorAll('.example-btn');
const commonChars = document.querySelectorAll('.common-char');
const quizChar = document.getElementById('quizChar');
const optionYes = document.getElementById('optionYes');
const optionNo = document.getElementById('optionNo');
const quizResult = document.getElementById('quizResult');
const nextQuestionBtn = document.getElementById('nextQuestion');
// 当前测验题目
let currentQuizChar = '';
let correctAnswer = false;
// 标签切换功能
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.getAttribute('data-tab');
// 更新按钮状态
tabBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// 更新内容区
tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === `${tabId}-tab`) {
content.classList.add('active');
}
});
// 如果是测验标签，生成新题目
if (tabId === 'quiz') {
generateQuizQuestion();
}
});
});
// 搜索功能
function searchCharacters(query) {
resultsGrid.innerHTML = '';
if (!query) {
resultsGrid.innerHTML = '<p style="text-align: center; grid-column: 1/-1; font-size: 1.3rem; color: #a0c8f0;">请输入要查询的汉字</p>';
return;
}
// 单个字符查询
if (query.length === 1) {
const charData = enteringToneChars[query];
if (charData) {
renderCharacterCard(query, charData);
} else {
resultsGrid.innerHTML = `
<div style="text-align: center; grid-column: 1/-1; padding: 40px;">
<h3 style="color: #ff6b6b; margin-bottom: 20px;">未找到相关信息</h3>
<p>汉字 "${query}" 未收录在数据库中，可能不是常见入声字。</p>
</div>
`;
}
return;
}
// 多字符查询
let found = false;
for (let i = 0; i < query.length; i++) {
const char = query[i];
const charData = enteringToneChars[char];
if (charData) {
renderCharacterCard(char, charData);
found = true;
}
}
if (!found) {
resultsGrid.innerHTML = `
<div style="text-align: center; grid-column: 1/-1; padding: 40px;">
<h3 style="color: #ff6b6b; margin-bottom: 20px;">未找到相关信息</h3>
<p>输入的汉字中未找到入声字信息。</p>
</div>
`;
}
}
// 渲染字符卡片
function renderCharacterCard(char, data) {
const card = document.createElement('div');
card.className = 'character-card';
card.innerHTML = `
<div class="character">${char}</div>
<div class="character-info">
<p><strong>拼音：</strong>${data.pinyin}</p>
<p><strong>中古韵部：</strong>${data.category}</p>
<p><strong>现代声调：</strong>${data.modern}</p>
<p><strong>入声字：</strong>${data.isEntering ? '是' : '否'}</p>
<p><strong>例词：</strong>${data.examples}</p>
<p><strong>说明：</strong>${data.description}</p>
</div>
`;
resultsGrid.appendChild(card);
}
// 搜索按钮事件
searchBtn.addEventListener('click', () => {
const query = searchInput.value.trim();
searchCharacters(query);
});
// 回车键搜索
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const query = searchInput.value.trim();
searchCharacters(query);
}
});
// 示例按钮事件
exampleBtns.forEach(btn => {
btn.addEventListener('click', () => {
const char = btn.getAttribute('data-char');
searchInput.value = char;
searchCharacters(char);
});
});
// 常用字符事件
commonChars.forEach(char => {
char.addEventListener('click', () => {
const charValue = char.getAttribute('data-char');
// 切换到查询标签
tabBtns.forEach(b => b.classList.remove('active'));
document.querySelector('[data-tab="search"]').classList.add('active');
tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === 'search-tab') {
content.classList.add('active');
}
});
// 执行查询
searchInput.value = charValue;
searchCharacters(charValue);
});
});
// 生成测验题目
function generateQuizQuestion() {
// 获取所有字符
const chars = Object.keys(enteringToneChars);
// 随机选择一个字符
const randomChar = chars[Math.floor(Math.random() * chars.length)];
currentQuizChar = randomChar;
correctAnswer = enteringToneChars[randomChar].isEntering;
quizChar.textContent = randomChar;
quizResult.textContent = '请选择你的答案';
quizResult.className = 'quiz-result';
}
// 测验选项事件
optionYes.addEventListener('click', () => checkAnswer(true));
optionNo.addEventListener('click', () => checkAnswer(false));
// 检查答案
function checkAnswer(userAnswer) {
if (userAnswer === correctAnswer) {
quizResult.textContent = `正确！"${currentQuizChar}" ${correctAnswer ? '是' : '不是'}入声字`;
quizResult.className = 'quiz-result correct';
} else {
quizResult.textContent = `错误。"${currentQuizChar}" ${correctAnswer ? '是' : '不是'}入声字`;
quizResult.className = 'quiz-result incorrect';
}
}
// 下一题按钮
nextQuestionBtn.addEventListener('click', generateQuizQuestion);
// 初始化页面
window.onload = () => {
// 初始显示一些入声字
searchCharacters('一七日');
};
</script>
</body>
</html>
index.html
index.html